LESS
变量
很容易理解:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
输出:
#header { color: #6c94be; }
甚至可以用变量名定义为变量:
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
解析后:
content: "I am fnord.";
请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次.
混合
在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样调用就可以了:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered
class里面的属性样式都会在 #menu a
和 .post a
中体现出来:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.
带参数混合
在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他class中像这样调用它:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
我们还可以像这样给参数设置默认值:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以现在如果我们像这样调用它的话:
#header {
.border-radius;
}
radius的值就会是5px.
你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
输出:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}