less的几种简单用法

一：变量
@width:50%;
.box{
width:@width;或者width:@width+50px;
}
二：函数
.background(@color)
{
background(@color);
}
.box{
background(red);
}
也可以这样写
@base: #f04615;
@width: 0.5;

.class {
width: percentage(@width); // returns 50%
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
三：混合
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.box{
.bordered();
color:red;
}
.box1{
color:green;
.bordered();
}
这样box和box1都继承了 .bordered都样式
四：嵌套
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
使用less后可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}