基础语法
一 注释
二 变量
@backcolor:#000;
@font:14px;
.a{
background-color: @backcolor;
font-size: @font - 1;
}
三 调用
.a{
height: 100px;
}
.b{
width: 100px;
.a;
}
.blue_border(@width){
border: @width solid blue;
}
.newborder{
.blue_border(1px);
}
.red_border(@width:10px){
border: @width solid red;
}
.newredborder{
.red_border();
}
.newredborder2{
.red_border(5px);
}
四 匹配模式(定义参数,调用函数时匹配参数)
.fn(one){
width: 10px;
height: 10px;
}
.fn(two){
width: 20px;
height: 20px;
}
.fn(three){
width: 30px;
height: 30px;
}
.newFn{
.fn(one);
}
五 运算
@ysa:100px;
@ysb:200px;
.a{
width: @ysa + 10;
}
.b{
width: @ysa - @ysb;
}
.c{
width: @ysa * @ysb;
}
.d{
width: @ysb / @ysa;
}
六 嵌套(ul >li >span >a)
ul{
list-style: none;
width: 100px;
position: relative;
li{
width: @ysa;
span{
display: inline-block;
a{
color: #fff;
}
}
}
}
ul{
list-style: none;
li{
width: @ysb;
&:hover{
color: #000;
}
}
}
七 @import