1.koala可以用来编译less;
2.less注释：
//不会被编译
/*此注释会编译到css里*/
3.定义变量：
less:
@test_300px;
.box {
@test_width;//编译在css为300px;
height:@test_width;
background:pink;
}
html:
<div class="box">
</div>
4. &用法:
a{
color：blue；
&：hover{
color：red；
}
}//&就相当于a
再比如，父元素叫.wrap 儿子元素中有一个叫 .wrap_2，那就可以这样写
.wrap{
&_2{}
}
5.嵌套
less:
.nest{
widows: 300px;
height: 60px;
h1{
font-size: 30px;
color: #1b6d85;
a{
text-decoration: none;
&:hover{
color: cadetblue;
}
}
}
p{
font-size: 20px;
color: #1A8ECE;
}
}
html:
<div class="nest">
<h1><a>this is a blue world!</a></h1>
<p>i know one thing,you know nothing</p>
</div>
6.混合的例子
.border_radius(@radius: 5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}//此不会被编译到css
.radius_test {
100px;
height: 20px;
background: pink;
.border_radius();//括号里可以自定义如（15px)等
}
//变量名做作为变量
@co:color;
@color:pink;
#box3 {
background: @@co+19*2;//@@co等于@color
color: @color;
}
7.@arguments参数
.boxShadow(@x:0;@y:0;@blur:1px;@color:gray){
box-shadow: @arguments;
}
#box3 {
.boxShadow(3px,2px,3px,yellow);
}