less入门和使用（二）

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及源码。