注释
less的注释有两种方式,一种为css用的/**/,这种注释的方法会被less所编译成css。另一种为//,这种不会被less所编译
less代码
/*会被编译*/
//不会被编译
css输出代码
/*会被编译*/
变量
less中用@变量名:值的方法来生命变量
less代码
@test_width:100px;
@test_color:red;
.box{
width:@test_width ;
height:@test_width ;
background:@test_color ;
}
css输出代码
.box {
width: 100px;
height: 100px;
background: red;
}
混入
可以将定义好的样式引入到另一个样式中,类似于函数的调用
less代码
//这里是没带参数的嵌套
.addradius(){
border-radius: 10px;
}
//这里是带参数的嵌套
.addboder(@test_color){
border: 1px solid @test_color;
}
//这里是带默认值的参数嵌套,keyi1
.addmargin(@v:10px){
margin: @v;
}
.box{
width:100px;
height:100px ;
background:red;
.addradius;
.addboder(red);
.addmargin;
}
css输出代码
.box {
width: 100px;
height: 100px ;
background: red;
border-radius: 10px;
border: 1px solid red;
margin: 10px;
}
匹配模式
相当于条件判断,只有满足条件才匹配
less代码
//括号内的不带符号的参数代表条件
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(f){
position: fixed;
}
.box{
.pos(a);
}
css输出代码
.box {
position: absolute;
}
运算
less里的变量可以直接进行运算
less代码
@lenght:100px;
//减法的变量之间一定要有空格
.box{
width: (@lenght + 20)/4;
height: @lenght - 20*3;
}
css输出代码
.box {
width: 30px;
height: 40px;
}
嵌套
可以实现多层嵌套以及多个关系嵌套
less代码
ul{
list-style: none;
width: 100px;
li{
height: 20px;
a{
background: red;
//&相当于上一个选择器
&:hover{
background: blue;
}
}
}
>.left{
float: left;
width: 10px;
height: 10px;
background-color: red;
}
.right{
float: right;
width: 10px;
height: 10px;
background-color: red;
}
}
css输出代码
ul {
list-style: none;
width: 100px;
}
ul li {
height: 20px;
}
ul li a {
background: red;
}
ul li a:hover {
background: blue;
}
ul > .left {
float: left;
width: 10px;
height: 10px;
background-color: red;
}
ul .right {
float: right;
width: 10px;
height: 10px;
background-color: red;
}
@arguments
@arguments包含所有变量
less代码
.addborder(@l:1px,@s:solid,@c:red){
border: @arguments;
}
.box{
.addborder();
}
css输出代码
.box {
border: yellow solid red;
}