mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-18 21:01:52 +03:00
388 lines
6.7 KiB
Markdown
388 lines
6.7 KiB
Markdown
|
---
|
|||
|
|
language: less
|
|||
|
|
filename: learnless-cn.less
|
|||
|
|
contributors:
|
|||
|
|
- ["Saravanan Ganesh", "http://srrvnn.me"]
|
|||
|
|
translators:
|
|||
|
|
- ["Jiang Haiyun", "http://www.atjiang.com"]
|
|||
|
|
lang: zh-cn
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
Less是一种CSS预处理器，它增加了诸如变量、嵌套、mixin等功能。
|
|||
|
|
Less(以及其它预处理器，如[Sass](http://sass-lang.com/))能帮助开发人员编写易维护，DRY (Don't Repeat Yourself) 的代码。
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
|
|||
|
|
|
|||
|
|
//单行注释在编译成CSS后会被删除。
|
|||
|
|
|
|||
|
|
/* 多行注释将保留. */
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 变量
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 你可以将一个CSS值（如一个颜色值）保存到变量中。
|
|||
|
|
使用'@'符号来创建一个变量。*/
|
|||
|
|
|
|||
|
|
@primary-color: #a3a4ff;
|
|||
|
|
@secondary-color: #51527f;
|
|||
|
|
@body-font: 'Roboto', sans-serif;
|
|||
|
|
|
|||
|
|
/* 你可以在你的样式文件中使用这些变量。
|
|||
|
|
现在假如你想修改颜色，你只需修改一次即可。*/
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background-color: @primary-color;
|
|||
|
|
color: @secondary-color;
|
|||
|
|
font-family: @body-font;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 以上将编译成： */
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background-color: #a3a4ff;
|
|||
|
|
color: #51527F;
|
|||
|
|
font-family: 'Roboto', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 相比于在你的样式文件中逐个修改，这种方式维护性更好。 */
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Mixins
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 如果你要为多个元素编写同样的代码，
|
|||
|
|
你可能想实现轻松地重用。*/
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 你只需简单地将选择子作为样式添加进来就能使用mixin了 */
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
.center;
|
|||
|
|
background-color: @primary-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 它将编译成: */
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background-color: #a3a4ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通过在选择子后添加括号，可以使这些mixin代码不被编译 */
|
|||
|
|
|
|||
|
|
.center() {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
.center;
|
|||
|
|
background-color: @primary-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 将编译成: */
|
|||
|
|
div {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background-color: #a3a4ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 嵌套
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Less允许你在选择子中嵌套选择子 */
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin-top: 2em;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
background-color: #f00;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* '&'将被替换成父选择子。*/
|
|||
|
|
/* 你也可以嵌套伪类。 */
|
|||
|
|
/* 注意过度嵌套将会导致代码难以维护。
|
|||
|
|
最佳实践推荐在嵌套时不超过3层。
|
|||
|
|
例如： */
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin-top: 2em;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
background-color: red;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: blue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成： */
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin-top: 2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul li {
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul li:hover {
|
|||
|
|
background-color: blue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul li a {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 函数
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Less提供的函数可以用来完成多种任务。
|
|||
|
|
考虑以下情况： */
|
|||
|
|
|
|||
|
|
/* 函数可以通过其名称及传入其所需的参数来调用。 */
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
width: round(10.25px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
background-color: lighten(#000, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
background-color: fadeout(#000, 0.25)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成: */
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
width: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
background-color: #010101;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 你也可以定义自己的函数。函数非常类似于mixin。
|
|||
|
|
当你在函数和mixin之间抉择时，
|
|||
|
|
记住mixin最适合用来创建CSS而函数更适合于
|
|||
|
|
处理那些可能在你的Less代码中使用的逻辑。
|
|||
|
|
'数学运算符'部分的例子是转成可重用函数的最佳选择。*/
|
|||
|
|
|
|||
|
|
/* 该函数计算两数的平均值： */
|
|||
|
|
|
|||
|
|
.average(@x, @y) {
|
|||
|
|
@average-result: ((@x + @y) / 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
.average(16px, 50px); // "调用"mixin
|
|||
|
|
padding: @average-result; // 使用它的"返回"值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成: */
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
padding: 33px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 扩展 (继承)
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 扩展是在选择子间共享属性的一种方法。 */
|
|||
|
|
|
|||
|
|
.display {
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.display-success {
|
|||
|
|
&:extend(.display);
|
|||
|
|
border-color: #22df56;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成: */
|
|||
|
|
.display,
|
|||
|
|
.display-success {
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
.display-success {
|
|||
|
|
border-color: #22df56;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 扩展一条CSS语句优于创建一个mixin，
|
|||
|
|
这是由其组合所有共享相同基样式的类的方式决定的。
|
|||
|
|
如果使用mixin完成，其属性将会在调用了该mixin的每条语句中重复。
|
|||
|
|
虽然它不至会影响你的工作流，但它会在由Less编译器
|
|||
|
|
生成的的文件中添加不必要的代码。*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 片段与导入
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Less允许你创建片段文件。它有助于你的Less代码保持模块化。
|
|||
|
|
片段文件习惯上以'_'开头，例如 _reset.css，并被导入到
|
|||
|
|
一个将会被编译成CSS的主less文件中。*/
|
|||
|
|
|
|||
|
|
/* 考虑以下的CSS，我们将把它们放入一个叫_reset.css的文件中 */
|
|||
|
|
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
ul,
|
|||
|
|
ol {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Less提供的@import能用来将片段导入到文件中。
|
|||
|
|
它与传统的CSS @import语句不同，无需通过
|
|||
|
|
HTTP请求获取导入文件。Less提取导入文件
|
|||
|
|
并将它们与编译后的代码结合起来。 */
|
|||
|
|
|
|||
|
|
@import 'reset';
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: Helvetica, Arial, Sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成: */
|
|||
|
|
|
|||
|
|
html, body, ul, ol {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: Helvetica, Arial, Sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 数学运算符
|
|||
|
|
==============================*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Less提供以下的运算符: +, -, *, /, 和 %。
|
|||
|
|
相比于使用你事先手工计算好了的数值，它们
|
|||
|
|
对于直接在你的Less文件中计算数值很有用。
|
|||
|
|
以下是设置一个两列设计的例子。*/
|
|||
|
|
|
|||
|
|
@content-area: 960px;
|
|||
|
|
@main-content: 600px;
|
|||
|
|
@sidebar-content: 300px;
|
|||
|
|
|
|||
|
|
@main-size: @main-content / @content-area * 100%;
|
|||
|
|
@sidebar-size: @sidebar-content / @content-area * 100%;
|
|||
|
|
@gutter: 100% - (@main-size + @sidebar-size);
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-content {
|
|||
|
|
width: @main-size;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sidebar {
|
|||
|
|
width: @sidebar-size;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gutter {
|
|||
|
|
width: @gutter;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编译成： */
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-content {
|
|||
|
|
width: 62.5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sidebar {
|
|||
|
|
width: 31.25%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gutter {
|
|||
|
|
width: 6.25%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 实践Less
|
|||
|
|
|
|||
|
|
如果你想在你的浏览器中尝试LESS，参阅：
|
|||
|
|
* [Codepen](http://codepen.io/)
|
|||
|
|
* [LESS2CSS](http://lesscss.org/less-preview/)
|
|||
|
|
|
|||
|
|
## 兼容性
|
|||
|
|
|
|||
|
|
Less可以用于任何项目中，只要你有程序能将它编译成CSS即可。你还需要验证你所使用的CSS是否与你的目标浏览器兼容。
|
|||
|
|
|
|||
|
|
[QuirksMode CSS](http://www.quirksmode.org/css/)和[CanIUse](http://caniuse.com) 对于检查兼容性来说都是不错的资源。
|
|||
|
|
|
|||
|
|
## 延伸阅读资料
|
|||
|
|
* [Official Documentation](http://lesscss.org/features/)
|
|||
|
|
* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)
|