0.简介
LessCSS是一种动态样式语言
1.变量
@variable:value;
变量可以运算
2.混合
可以引用已经定义的class和id
.clear{
clear:both;
}
p{
.clear;
}
编译结果:
p{ clear:both; }
3.传参
可以带默认参数
.border-radius(@width:2px){
-webkit-border-radius:@width;
-moz-border-radius:@width;
border-radius:@width;
}
p{
.border-radius(10px);
}
多参数情况(形参可用逗号或空格分开)
.border(@width,@style,@color){
border:@width @style @color;
}
p{
.border(1px,solid,red);
}
4.嵌套
ul,ol{
li{
float: left;
a{
color:#000;
&:hover{
color:#f00;
}
}
}
}
5.注释
//单行注释
/*多行注释*/
6.选择器
&代表上一级元素
ul{
li{
&:hover a{
background : #f00;
}
}
}
编译结果:
ul li:hover a{
background : #f00;
}
