什么是less?
Less是一门CSS预处理语言
,它扩展了CSS语言,增加了变量
,Mixin
,函数
等特性,使CSS更易维护和扩展。更少可以运行在Node或浏览器端
安装:安装Less的最简单方法是通过npm
,node.js包管理器
$ npm install -g less
命令行用法:
//命令行调用编译器
$ lessc styles.less
//输出编译的CSS
$ lessc styles.less styles.css
更多可参考less
实例:
less变量?
定义变量时使用@
@color:red;
div{
width:100px;
height:100px;
background-color:@color;
}
//编译出来的结果
div{
width:100px;
height:100px;
background-color:red;
}
混入:?
//类混入:
.width{
width:50px;
}
.f_left{
float: left;
}
div{
.width();
.f_left();
}
//编译后的结果
div{
width:50px;
flot:left;
}
函数混入(不需要样式编译在css中):?
.width(){
width: 50px;
}
.f_left(){
float: left;
}
//编译后的结果(上述函数将不会编译在css文件中)
div{
width:50px;
flot:left;
}
//定义函数传参
.f(@decrition:left){
float: @decrition;
}
.borderRadius(@radius:10px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
.box{
.f();
.borderRadius();
}
//可根据传入的参数编译出对应的css文件