LESS 是一门CSS预编译语言,犹记得当初打算使用CSS预编译语言的时候,可选的有SASS、LESS、Stylus三门,刚好那个时候在学习bootstrap,bootstrap项目中样式就是less写的,从此就结下了于LESS的缘分。LESS使用的快一年的时间了。
下面简单的列举一下我最爱的三个LESS的特性:
- 变量
编译前:
@color: #ccc;
#header {
color: @color;
}
h2 {
color: @color;
}
编译后
#header {
color: #ccc;
}
h2 {
color: #ccc;
}
- 混合(Mixins)
编译前
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
编译后
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
- 嵌套
编译前
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}
编译后
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
这三个原因我想足以让人爱上LESS了。但是这里需要注意的仍然是有些点:
- 变量命名是好事,尤其是对颜色、字体、栅格系统有非常大的帮助,但是使用过程还是需要谨慎,最好是有张网站用色的色表图片,展列整个网站所用颜色或者是直接做成网页显示。这样方便多人合作。
- 函数更多的用处在于封装一些需要加前缀的属性,或是多个参数的属性,同时命名一定要足够的语义化。
- 嵌套对程序员更友好, 也更好管理, 但是嵌套过深的话这点就成了灾难,会让人看的整个人都斯巴达掉。 适当嵌套,以保持CSS的优雅。
- 有时要考虑兼容性,需要避免编译某条属性,方法即在值的前面加一个~符号,具体如下:
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
}