Less入门到上手——前端开发利器<一>

摘录less官网的解释：

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

以上是less官方解释，说下本菜的理解：less类似css的jquery，一个为css封装的库。

less最终还是被编译成css被读取。

1、less定义变量：

/*声明变量*/
@var_120px;
/*使用变量*/
div{
   width:@var_width;
}

这样一段less代码被编译后的css是：div{120px;}

2、混合：

@d_length:300px;    /*定义变量*/
.d_1{
    width:@d_length;
    height:@d_length;
    border:blue 1px solid;
    float:left;
    margin-left:20px;
}
.d_2{
    .d_1;                        /*混合  使用.d_1全部样式*/
    background-color:#808080;
    border-color:red;
}
.d_3{    
    .d_2;                        /*混合  使用.d_2全部样式*/
    border-color:yellow;
}

混合特性，less中可以重复使用样式。可以把每一个样式都看做一个封装好的函数，其他样式若需要便直接调用。

混合带参，less的混合和函数一样，也可以带参数，在遇到大量重复，但同一属性值又需不一样。这时就要用到混合参数。

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color){
    width:300px;
    height:300px;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6);
}

混合带参时，也可以直接给参数赋值，在使用时注意，定义带参混合若定义的参数有赋值使用时可以不传参，若定义的参数没赋值使用时就必须传参，若定义了参数值，使用时依然可以传参改变预先定义的参数值。

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color,@wid:300px,@hei:100px){
    width:@wid;
    height:@hei;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
/* 此时前两个参数必须传值，后两个则可传可不传。 */
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6,600px,200px);
}

 3、匹配模式：

/* 公共部分函数 */
.arrow{
    width:0px;
    height:0px;
    overflow:hidden;
}
/* 定义四个方向 */
.arrow_all(top,@w:10px,@c:#4491F6){
    .arrow;
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;
}
.arrow_all(bottom,@w:10px,@c:#4491F6){
    .arrow;
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
.arrow_all(left,@w:10px,@c:#4491F6){
    .arrow;
    border-width:@w;
    border-color:transparent transparent transparent @c;
    border-style:dashed dashed dashed solid;
}
.arrow_all(right,@w:10px,@c:#4491F6){
    .arrow;
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:dashed solid dashed dashed;
}
/* 匹配时，根据传参来匹配使用哪个函数 */
.sanjiao{
    .arrow_all(right);
}

匹配模式是带参混合的高级使用，类似函数重写，根据参数自动判断选择使用哪个函数。