安装
npm install -g less
转换 文件+转换后文件名字 (会在当前文件夹生成文件)
lessc styles.less styles.css
+压缩
lessc --clean-css styles.less styles.min.css
使用
@color: #ccc; 变量
.h1{
color:@color;
}
混合(或者叫less的函数)
这里是函数
.rounded(@radius:5px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
混合使用
.header{
.rounded; 使用默认的5px圆角
.rounded(10px); 设置10px圆角
}
.rounded(@top-left,@top-right,@bottom-right,@bottom-left){
border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-webkit-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-moz-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
}
.header{
.rounded; 使用默认的圆角
.rounded(10px,10px,10px,10px); 设置左上-右上-左下-右下的圆角
}
嵌套规则
hader{
.title{
}
.span{
> p{ //>代表css的直接子元素
}
}
.content{
&:after{ //&代表自己 所以可以用伪类元素
}
}
}
函数与运算
@the-border: 1px;
@base-color: #111;
@red: #842210;
header{
border-left: @the-border;
border-right: @the-border * 2;
color: @base-color + #003300;
}
降级 如@red*10%的颜色
footer{
border-color:desaturate(@red,10%)
}
