什么是Less?
Less是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
知道Less是什么很重要,Less的出现就是为了方便程序员编写的,如果你使用Less还像写css那样编写,那使用Less是没有意义的。
基础语法
变量
如果学过编程语言,那么就很好理解,Less使用@来定义一个变量,之后想使用变量中的值就直接调用变量就好。
@color: #fff;
#header {color: @color;}
混合
我认为混合是很有用的,尤其是在写css3的时候。
.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;
}
在这里要注意,你可以指定参数,可以给参数赋值也可以不赋值,看需要而定。
嵌套
这是Less中最常用的,嵌套实现了在一个选择器里嵌套另一个选择器,从而实现选择器的继承,减少代码量。
#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中支持加,减,乘,除操作,也可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。
总结
我觉得Less既然作为一个方便程序员写css的语法,我们使用的时候就不应该像写css那样去用,提前的设计是比较重要的,应该先规划好比如:哪几个属性值、颜色常用?可以定义为变量,哪个选择器里的样式我可以直接调用?这样才能做到真正的简化、方便。我个人的实践还是比较少,等以后用得多了再来补充~