Less进阶之一

Less

类似的预处理css语言还有 Sass styuls等

Less简介：

LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

Less原理及特性：

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

Less注意事项：

       1：在文件顶部最好声明字符集@charset="UTF-8"， 并且要和文件的字符编码一致，以防出现中文显示乱码;         

        2:  在Less中支持不仅支持//双斜杠注释，也支持在CSS中使用的/**/注释

Less语法：变量，Mixin混入，嵌套，import,函数（内置函数，运算）

变量：

       1：必须加@前缀，：相当于等于号的意思，必须以分号结束；

        2：不能以数组开头，不能包含特殊字符，区分大小写；

@mainColor:@e92322;
@className:box;

div{
   background:@mainColor;
}
a:hover{
   color:@mainColor;
}
/*变量用于字符拼接的使用方法*/
.@{className}{
   color:@mainColor;
}

混入(Mixin)：

/*组合样式的例子*/
.w50{
     width:50%;
}
.f_left{
    float:left;
}
.f_right{
    float:right;
}

类混入：

/*.w50()和.f_left()会继承上述类的样式，并在编译less的过程中，得到继承的样式*/
.w50-f_left{
    .w50();
    .f_left();
}

/*等价于*/
.w50-f_left{
    width:50%;
    float:left;
}

 

函数混入：

/*定义函数*/
.w50(){
    width:50%;
}
.f_left(){
    float:left;
}
.f_right(){
    float:right;
}
/*将会调用上面定义好的函数*/
.w50-f_left{
    .w50();
    .f_left();
}
/*Less文件编译完成后,在CSS文件中将会显示*/
.w50-f_left{
   width:50%;
   float:left;
}

/*定义函数*/
/*定义包含参数函数*/
.w50(){
    width:50%;
}
/**四种情况
*1:定义了函数（没有默认值）,调用的时候必须传参
*2:定义默认值和定义变量值是一样的
*3:定义了函数并且有默认值，参数可传可不传
*4:可以更好的兼容CSS3中的属性  /**/
.f(@direction:left){
    float:@direction;
}
.boderRadius(@width:100px){
    border-radius:@width;
    -webkit-border-radius:@width;
    -moz-border-radius:@width;
    -o-border-radius:@width;
    -ms-border-radius:@width;
}
//*将会调用上面定义好的函数*/
.w50-f_left{
    .w50();
    .f(right);
    .borderRadius(50px);
}
/*Less文件编译完成后,在CSS文件中将会显示*/
.w50-f_left{
   width:50%;
   float:right;
   border-radius:50px;
   -webkit-border-radius:50px;
    -moz-border-radius:50px;
    -o-border-radius:50px;
    -ms-border-radius:50px;
}

好了，Less进阶一就写到这，写的比较详细，欢迎各位大佬多多批评指正！！！！