Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。
Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。
使用
1.使用koala软件,实时将.less文件转换为.css文件
2.在.html文件中使用link引入生成的.css文件
3.在.less文件中@charset"utf-8";
特性
变量
@变量名=属性;
@test_width:100px;
.box{
width:@test_width;
}
混合
.box{
width:100px;
.border
}
.border{
border: solid 1px pink;
}
混合 --带参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(10px);
}
混合 --默认带参
.border_03(@border_width:10px){
border:solid 1px @border_width;
}
.test_hunhe_03{
.border_03();
}
匹配模式
.triangle(top,@w:1px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
下面@_表示匹配结果怎样都会带上下面的样式
.triangle(@_,@_w:10px:@_c:#ccc){
}
匹配模式 -定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
.pipei{
width:200px;
height:200px;
background-color:green;
.pos(a);
}
运算
@test_width:200px;
.box{
width:@test_width+20;
}
或
@test_width:200;
.box{
width:@test_width+20px;
}
嵌套
尽量减少匹配层数
.list{
li{
}
a{
&:hover{
}
}
}
@arguments 代表所有传递进来的参数
.border(@w:10px,@c:teal,@xx:solid){
border:@arguments;
}
避免编译
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
!important关键字
会为所有混合带有的样式,添加上!important
例如:
test_important{
.border_03() !important;
}