CSS进阶-LESS(简介)

LESS简介

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

---

LESS安装（sublime）

安装less2css插件：
方法：ctrl+shift+p>install Package>输入less2css按Enter

安装less插件
方法：ctrl+shift+p>install Package>输入less按Enter

同时你还要安装node.js可以参照菜鸟教程中的教程安装（http://www.runoob.com/nodejs/nodejs-install-setup.html）

安装less
cmd命令下分别输入：
npm install -g less
npm install less-plugin-clean-css
提示安装好后重启sublime即可。

接下来我们就可以建一个简单的less文件来测试一下，less文件的代码如下：

div{
    height: 100px;
    width: 200px;
    .border;
}
//基本混合
.border{
    border: 2px solid black;
}

//带参数混合
.border_02(@border_width){
    border: @border_width solid black;
}

.border_02_test{
    .border_02(10px);
}

//带默认参数混合
.border_03(@border_width:10px,@color:black){
    border: @border_width solid @color;
}
.border_03_test1{
    .border_03();
}
.border_03_test2{
    .border_03(20px,red);
}

按保存后，在同一个文件夹下会生成一个相应的css文件，内容为：