注释
变量
// less 变量
// @变量名:变量值
@mainColor:#334455;
.box{
background-color:@mainColor;
}
嵌套
/*
嵌套
*/
.box{
.child{
color:blue;
}
.child2{
color:red;
}
&:hover{
cursor:pointer;
}
}
运算
.box{
background-color:#333333+#444444;
width:100px*2+10% // 210px
}
混合
.box{
font-size:20px;
}
// 混入传参
.box_border(@borderWidth:5px,@borderColor:red){
border:@borderWidth solid @borderColor
}
// 混入和映射结合使用.box_size()[width],弥补less中无法自定义函数
.box_size{
width:100px;
height:100px;
}
.box1{
width:.box_size()[width];
color:red;
.box()
.box_border(10px,#444444)
}
.box2{
width:200px;
color:blue;
.box()
.box_border(10px,#555555)
}
继承
// 并集,相对应用少
.box_border{
border:5px solid #FFD;
}
.box{
width:200px;
&:extend(.box_border);
}
/*
.box_border,.box{
border:5px solid #FFD;
}
*/
内置函数
color(red)
: 转为RGB16
进制颜色
convert(100px,'in')
: 转换单位,
ceil(10.5px)
: 向上取整
floor(10.5px)
: 向下取整
作用域
- 先在本地查找变量和混入
- 如果找不到,则从父级作用域继承
导入
@import './xx.less' // .less可以省略
映射
#box(){
width:100px;
height:100px;
}
.box_1{
width:#box[width];
}