less是一门css预处理语言,增加了变量,Mixin,函数等特性。
一、变量:
顾名思义,“less”英文含义为“减少的”,在我的理解看来就是让css也可以拥有某些js的特点,譬如如果要给几个div添加颜色background-color:#4D926F;如果用css来写就要给每个div分别加这个颜色,如果以后再想换颜色又要改这些样式,而在less中只需要定义一个变量即可完成,也方便以后的修改。
示例:
styles.less中
@width:600px;
@color:#4D926F;
@height:200px;
.header{
width: @width;
height:@height;
background-color: @color;
}
相当于.header{
width: 600px;
height:200px;
background-color: #4D926F;
}
二、混合:
混合可以将一个定义好的class1引入另一个class2中,从而使class2获得class1的全部样式。
有三种引入方法:
1.直接引入某个类的所有属性。
还是以刚才的例子,比如我需要在header上面添加一个边框,我只需定义一个.box,然后直接引入到.header中即可。
@width:600px;
@color:#4D926F;
@height:200px;
.box{
border:1px solid;
}
.header{
width: @width;
height:@height;
.box;
background-color: @color;
}
2.引用带参数的无默认值的类属性。.box2(@border_width){
border:@border_width solid red;
}
.header{
width: @width;
height:@height;
.box2(5px);
background-color: @color;
}
3.引用带参数带默认值的类属性。
使用时可以不进行传参,若传参可以覆盖默认值。
.box2(@border_width:8px){
border:@border_width solid red;
}
.header{
width: @width;
height:@height;
.box2();
background-color: @color;
}
三、嵌套:
我们可以在一个选择器中嵌套另一个选择器来实现继承。这样可以使层级关系更清楚,更方便使用。
.header{
h1{ color: lightcoral;}}
相当于
.header h1{
color: lightcoral;
}
四、函数和运算:
用变量进行加减乘除,这里需要注意的一点是加减时“+”“-”要与前后空出一个空格,不然会报错,建议大家牵扯到运算时给运算后的结果加上(),方便解析。
.content{
.box2(5px);
width: (@width + 100);
height:(@height*3);
background-color: yellowgreen;
}
以上就是less最基本的用法啦,以后还会更新的~欢迎前端同学来交流
个人github地址:https://github.com/Wangkaixinlove 里面有demo及源码。