1.koala可以用来编译less;

 

2.less注释：

//不会被编译

/*此注释会编译到css里*/

 

3.定义变量：

less:

@test_width:300px;

.box {

width:@test_width;//编译在css为width: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 {

width: 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);

}