一. koala 的下载与安装及配置
1. 下载地址http://koala-app.com/index-zh.html
2. 打开 koala 软件，点击"+"可以选择文件夹，选择的文件夹里需要预先准备一个 less 文件，且仅仅只需要准备 less 文件，当添加了这个文件夹后，koala 会根据 less 文件的名称在同一目录下自动添加一个 css 文件。
3. 在 html 中引入的依然是 css 文件，只不过我们一旦选用 less 编写样式了，以后维护就是维护 less 文件。
二. 编写less
1.less中的注释
less中注释可以使用"//......",这个注释不会被编译到css文件中，也可以使用/*xxxxx*/的注释方式，这种注释方式会被编译到css文件。
2.变量
定义变量：@box-width:100px;
使用变量 a{width:@box-width;}
定义变量的方法："@"加上变量名。
定义变量的好处：当需要更改样式中多处的值时，只需要更改变量的值，提高效率。
3.混合
使用less混合的功能就可以不用再html中
.border（@border-width:5px）{ border: @border-width solid red;}
.box{
width: 100px;
height: 100px;
.border(1px)；
}
.box2{
.box; //使用.box的样式
margin:20px;
}
4.匹配模式
相当于JS里的if（但不完全是），满足条件后才能匹配(例如以下使用html制作三角形的例子)
.triangle(top,@w:5px,@c:red){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style: dashed dashed solid dashe;
}
.triangle(bottom,@w:5px,@c:red){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style: dashed dashed solid dashe;
}
.triangle(@_,@w:5px,@c:red){
width: 0;
height: 0;
overflow:hidden;
}
5.运算
@height:20px;
p {height:@height-2;}
6.嵌套规则
<ul class="list">
<li><a href=""></a><span></span></li>
</ul>
less 文件样式：
.list{
width:100px;
li {width: 40px;}
a {
font-size:14px;
&:hover{ //&代表它的上一层选择器
background: red;
}
}
span {color: #ccc;}
}
7.@arguments变量
@arguments包含了了所以传递进来的参数，如果你不想单独处理每一个参数的话，你可以这样写：
.border-arg(@w:1px,@s:solid,@c:red;){
border:@arguments; //可以将所有参数都携带进去
}
.div{
.border-arg(10px);
}
8.避免编译、!important
有时候我们需要输入一些不正确的css语法或less不认识的专有语法，这样我们可以在前边输入一个“~”,例如：width: ~'calc(100% - 10px)';
!important 关键字会为所有混合所带来的样式，添加！important，一般不加
