引言：less是一门css预处理语言，就像慕课网课程里说的，这是专门为懒人准备的，这里的懒人并不是贬义词，科技的发展可以说都是懒得产物，就是因为懒才想出了各种简便之法。懒得走路，骑马，坐车；懒得自己劳动，发明了各种工具；懒得打字，用语音；... 有些时候懒是有很大的促进作用的。
接下来回到主题，这里的less主要说一些基本知识吧，先从工具开始，遵循慕课网上推荐的用koala进行编译。首先下载koala，我已开始用mac下载，下载后总是解压失败，百度后发现可能是下载速度过快，下载不完全导致（不知道是不是，反正换个电脑在Windows下下载就没问题），在Windows下下载解压后拷到mac下。因为我是看了视频后自行下载安装的，下面就是我的安装及使用过程：
1、koala基本配置：进主页后找到配置图标，把语言设置成简体中文（要退出后在进入才生效），将项目拖进koala主页后可以对着less文件单击右键弹出的弹框中有设置输出路径。不单击右键，只点击一下弹出的是其他属性。
2、因为昨晚看了视频，以为自己会写的，但是打开koala后新建了文件与文件夹，按照记忆设置了选项，在index里写了代码，也在less里写了，刷新页面没反应，没反应是因为index.html页面忘了配置link引用css文件。
3、用webstorm编写less输出的css没有自动更新（我用的是webstorm编辑器）：在webstorm配置里找到file watchers 点击右边框底部的加号，把less添加进去即可（默认配置不用修改）。
上面几步是我遇到的问题。下面介绍我知道的less。
1、变量
less的变量定义的挺简单，用@声明即可，注意：下面的代码是在main.less里写的。
@body_color: blue; body { background-color: @body_color; }下面是编译后的css文件。（两个文件名分别为main.less,main.css）这里的main.css是自动生成的，即只需要写less文件，不用管css。
body { background-color: #0000ff; }以上就是简单的演示了下变量的定义与引用。
2、混合1）带括号混合 这种混合类似于函数，是大样式嵌套小样式，看代码
.border_box(@box_height:100px ,@box_width: 100px){ height: @box_height; width: @box_width; } #content{ background-color: red; border: 1px solid green; .border_box(); //使用默认参数 } 这就是一个嵌套，content引用.border时记得带括号，这段代码使用了默认参数，也可以自己定义参数，当然不带参数也可以。看main.css代码 #content { background-color: red; border: 1px solid green; height: 100px; width: 100px; } 可以看到: .border();混合方式直接把.border里的内容拷贝到content里。 2）不带括号 下面的代码我们加了一个.border_style样式，注意： 这里没有(),混合引用时有没有加()。 .border_style{ border-width: 1px; border-style: solid; border-color: green; } #content{ background-color: red; //border: 1px solid green; .border_style; .border_box(); } 再对比main.css .border_style { border-width: 1px; border-style: solid; border-color: green; } #content { background-color: red; border-width: 1px; border-style: solid; border-color: green; height: 100px; width: 100px; } 此时会发现 .border_style{}里面的东西在main里也有，这和.border_box(){}不同，后一个在main.css里是没有单独的.border_box(){}样式的。3、匹配
匹配有点类似于java或c++中的多态，同一个函数名参数不同，引用时通过参数进行区分，这里也是类似
.border_match(top,@boxWidth: 5px, @boxColor: red){ border-width: @boxWidth; border-color: @boxColor transparent transparent transparent; } .border_match(bottom,@boxWidth: 5px, @boxColor: red){ border-width: @boxWidth; border-style: solid; border-color: transparent transparent @boxColor transparent; } .border_match(left,@boxWidth: 5px, @boxColor: red){ border-width: @boxWidth; border-style: solid; border-color: transparent transparent transparent @boxColor; } .border_match(right,@boxWidth: 5px, @boxColor: red){ border-width: @boxWidth; border-style: solid; border-color: transparent @boxColor transparent transparent; } .box{ .border_box(); .border_match(bottom); background-color: azure; } 上图及代码就是一个简单的匹配演示。4、运算
这里的运算其实就是变量的逻辑运算，看代码
@mathWidth: 50px; .math{ margin-top: 20px; width: @mathWidth+100; height: 50px; border: 1px solid green; } 再看main.css里的 .math { margin-top: 20px; width: 150px; height: 50px; border: 1px solid green; }编译后的结果就是运算的结果。
5、嵌套下面代码一和代码二的实现效果是一样的。
less语序引入其他less文件，用@import “”；的形式，注意引入的文件不用加less后缀名，引入css要加后缀名，还要加()。 @import "ku"; //引入ku.less文件 @import "a.css"; //在编译后的css文件里也是这种引入，并没有如其他less那样加载文件里 @import (less) "a.css"; //这样的引用类似于引less文件，注意：()前后都有空格，这个import放在哪实际位置就在哪，想放前面就把这个引入放前面，想放后面引入时就放在后面 好了，less部分差不多就这些了，剩下的就是熟能生巧，多加练习吧差点忘了上github地址了，虽然我觉得没必要，还是给一个吧：https://github.com/dwenb/koalaTest。
//代码一 .list{ margin-left: 300px; width: 100px; background-color: antiquewhite; border: 1px solid green; li :hover { color: red; } } //代码二 .list{ margin-left: 300px; width: 100px; background-color: antiquewhite; border: 1px solid green; li { &:hover { color: red; } } }编译后的main.css都相同，都是下面这个
.list { margin-left: 300px; width: 100px; background-color: antiquewhite; border: 1px solid green; } .list li:hover { color: red; }注意： 代码二中“ & ”代表的是上一层选择器。 6、引入其他less文件 less语序引入其他less文件，用@import “”；的形式，注意引入的文件不用加less后缀名，引入css要加后缀名，还要加()。 @import "ku"; //引入ku.less文件 @import "a.css"; //在编译后的css文件里也是这种引入，并没有如其他less那样加载文件里 @import (less) "a.css"; //这样的引用类似于引less文件，注意：()前后都有空格，这个import放在哪实际位置就在哪，想放前面就把这个引入放前面，想放后面引入时就放在后面 好了，less部分差不多就这些了，剩下的就是熟能生巧，多加练习吧！ 差点忘了上github地址了，虽然我觉得没必要，还是给一个吧： https://github.com/dwenb/koalaTest。