Less.js的就是在CSS的基础上增加变量,Mixin(混入)运算以及函数功能等功能。
作用是方便CSS的维护,成本和编写成本
Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。为 CSS 加入程序式语言的特性
LESS语法
可以自定义变量然后在全局样式中使用
@backgroundcolor: 100px;
#header{
backgroundcolor:@backgroundcolor;
}
#h2{
backgroundcolor:@backgroundcolor;
}
这就类似于宏定义。方便维护修改。(在实际项目开发中还是将LESS编译为静态的CSS文件然后在HTML文档中使用)
Less变量和其它编程语言一样,可以实现值的复用,同样他也有生命周期,也就是Scope(作用域),规则是先局部找,如果没找到查找上级定义,直到全局定义。
@width: 20px;
#rootDiv {
@width: 30px;
#firstDiv{
width: @width; // 30px
}
}
#secondDiv{
width: @width; //20px
}
Mixins(混入)
很多动态语言都支持Mixins(混入)特性,它是多重继承的一种实现,在LESS中,混入是指在一个Class中引入一个已经定义的CLASS,就像在当前CLASS
中增加一个属性一样。
其实就类似与变量类似,不过这里是一个类的嵌入。
.Corners(@radius:5px){
width: @radius;
height: @radius;
border: @radius;
}
#rootDiv {
.Corners;
}
#secondDiv{
.Corners(20px);
}
width: @radius;
height: @radius;
border: @radius;
}
#rootDiv {
.Corners;
}
#secondDiv{
.Corners(20px);
}
转为CSS格式
.Corners(@radius:5px){
width: @radius;
height: @radius;
}
#rootDiv {
width: 5px;
height: 5px;
}
#secondDiv{
width: 20px;
height: 20px;
}
width: @radius;
height: @radius;
}
#rootDiv {
width: 5px;
height: 5px;
}
#secondDiv{
width: 20px;
height: 20px;
}
Mixins也有一个@arguments变量。@arguments在Mixins是一个很特别的参数。可以代替你省下很多代码。
重命名类似于C++的重载,避免重名,前面类似于命名空间,后面的Corners就是选择器名称
#mynamespace>.Corners {
.body {...}
.user {...}
}
Sass的作用目标和Less目前没有实践过,后续实践补充。