less

一、使用方法

1.1直接引入less.js

好处：能获取客户端的数据，从而进一步计算。
坏处：在客户端解析less造成性能浪费，不利于维护。

1.2koala编译器

每次都要打开软件

1.3在服务器环境编译node npm

对于初学者可能比较生疏
vue项目在用less时，在style里边写：

1.4在编译器中实时编译

配置稍微麻烦

二、less是什么？

官方：一种动态样式语言：
变量、继承、运算、函数
我的理解：一个写css的工具，更加的灵活的统筹全局更加方便的计算。

三、嵌套

嵌套：我们可以在一个选择器中嵌套一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:500px;
        height:500px;
        background:#ff0000;
    }
}

四、变量

变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
变量作用域：一个或括号就是一个作用域。

@width：200；
@height：200；
@background：#ff0000；
<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:@width*1px;
        height:@height*1px;
        background:@background;
    }
}

五、混合

5.1混合：

将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

.clearFix{
    *zoom:1;
    &:after{
        content:'';
        display:block;
        clear:both;
    }
}
.classa{
    border:1px solid #ff0000;
}
.classb{
    .classa;
    .clearFix;
}

5.2带参数的混合

.classa（@color）{
    border:1px solid @color;
}
.classb{
    .classa（#ff0000）;
}

5.3带默认参数的混合

.classa（@width:1px,@style:solid）{
    border:@width @style #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

六、arguments变量

arguments变量，代表了所有的参数（在不在乎参数顺序的时候使用）

.classa（@width:1px,@style:solid）{
    border:@arguments #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

七、 模式匹配

.border(left,@width:1px){
    border-left:@width solid #333;
}
border(right,@width:1px){
    border-right:@width solid #333;
}
.border(@_,@width:1px){
    width:100px;
}
.box1{
    .border(left,5px)
}
.box2{
    .border(right,5px)
}

八、Math函数

round(5.5)    四舍五入 6
ceil（2.4）    向上取整 3
floor（2.6）    向下取整 2

九、命名空间

.red{
    .button{
        background：red；
    }
}
.blue{
    .button{
        background：red；
    }
}
.box{
    .red > .button;
}

十、注释

// 这种注释方法不会被编译到css文件里面去（通常用于生产环境）
/*
这种注释会被解析到css文件里面去
*/

十一、关联

@import “global.less”

十二、避免编译

.box{
    width：@rem;
    font:(12/@rem)~'/'(20/@rem) '宋体')
}

参考链接

http://www.bootcss.com/p/less...