什么是Less？koala配置及使用

　 css的Less好比是js的Jquery，可以让人们更方遍快捷的使用css，使css代码更简洁，可以减少重复的代码，减少开发人员的工作量。

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

　　Less中文手册：less.bootcss.com

二、编译工具

　　1.Koala：国人开发的LESS/SASS编译工具

　　　下载地址：

　　2.Node.js库

　　3.浏览器端使用

三、koala配置及使用

　　1.新建后缀为.less文件：index.less

　　　头部写上：@charset "utf-8"; 　　//设定字符集

　　2.把文件夹拖到koala中，设置输出路径为style下的index.css

　　 使用koala进行编译，然后就生成了一个index.css文件。

　　3.之后我们只要编辑index.less文件即可。

四、注释

　　1./*编译后会被保留*/

　　2.//编译后不会被保留

五、变量

　　1.设定变量：

　　@text_width: 300px;

　　2.使用变量：示例如下

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;
　　}

六、混合

　　1.混合简介：与原有的在class中新追加class的方法有所不同（原有

　　使用示例一：

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;

　　　　.border;
　　}

　　.border{

　　　　border: 5px solid yellow;

　　}

　　使用示例二：新增一个box2，但是它和box1只有一点点细微的区别，可以直接拿来box1使用，然后加上它自己的样式。

　　.box2{

　　　　.box1;

　　　　margin-left: 100px;

　　}

　　2.混合是可以带参数的

　　在index.less中使用带参数的值，在border_02后面加一个（），里面声明一个变量；

　　然后传入参数30px。

　　　　}

　　2.!important关键字：适合用来调试，一般不会用到

　　.test_important{

　　　　.box !important;　　　　//给所有样式加上!important

　　}

以上就是什么是Less？koala配置及使用的详细内容，更多请关注其它相关文章！