less注释
可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中。开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文件中不会有注释。
less变量
LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。例如:@width:300px
less混合
混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。
可以创建一个mixin,它可以通过简单地放置括号后在输出中消失。
.a(){
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}
最终输出的css为:
.myclass {
background: #64d9c0;
padding-left: 100px;
}
也可以传递参数
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.test{
width:300px;
height:200px;
.border_radius(10px);
}
编译之后的css代码为:
.test {
width: 300px;
height: 200px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
less嵌套
它是一组CSS属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性。
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
less操作
LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/),它们可以对任何数字,颜色或变量进行操作。
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}