参考: https://blog.csdn.net/yuhui01/category_7781547.html
less匹配模式:
参考:https://blog.csdn.net/YUHUI01/article/details/80947259
1、根据传参的值不同进行匹配
.a(@_,@z) { // @_:所有情况都会执行的公共模式
font-size: 12px;
}
.a(right, @m) { // 只有是right的时候,会执行
margin-right: @m;
}
.a(left, @m) { // 只有是left的时候,会执行
margin-left: @m;
}
// 调用
.x {
.a(right, 20px)
}
.y {
.a(left, 15px)
}
2、根据传参的个数不同进行匹配
.test(@width,@color){ //less
color: @color;
width: @width;
};
.test(@width){
width: @width;
}
@width:200px;
@color:red;
div{
.test(@width,@color);
}
// 结果
div { //css
color: red;
width: 200px;
}
.test(@width,@color){ //less
color: @color;
width: @width;
};
.test(@width){
width: @width;
}
div{
.test(200px);
}
// 结果
div {
width: 200px;
}
3、根据引导(当when条件适合时)进行匹配 when
.test(@a)when(lightness(@a)>=50%){ //less
background-color: black;
}
.test(@a)when(lightness(@a)<50%){
background-color: white;
}
.test(@a){
color: @a;
}
#div{
.test(#666)
}
#span{
.test(#ccc);
}
3.1、当使用逗号
分隔时,表示为“或”
操作符,只要符合一个条件就会被视为匹配成功
.test(@a)when(@a>50px),(@a<0px){ //less
border-left: @a;
}
div{
.test(51px)
}
span{
.test(12px)
}
3.2、使用and
作为连接符时,只有符合所有条件才会被视为匹配成功
.test(@a)when(@a<50px)and(@a>0px){ //less
border-left: @a;
}
div{
.test(51px)
}
span{
.test(12px)
}
3.3、使用not作为连接符,表示除该条件之外,其它情况会视为匹配成功
.test(@a)when not(@a<50px){ //less
border-left: @a;
}
div{
.test(51px)
}
span{
.test(12px)
}
函数+运算
- math函数:
round(2.86) //四舍五入 返回 3
ceil(2.3) //向上取整 返回 3
floor(2.6) //向下取整 返回 2);
percentage(0.6) //转为百分比 返回60%
- color函数:
1、间接获取
lighten(@color,10%) //返回颜色比@color浅10%的颜色
darken(@color,10%) //...深
saturate(@color,10%) //...饱和比 深
desaturate(@color,10%) //...饱和比 浅
fadein(@color,10%) //...不透明10%
fadeout(@color,10%) //...透明10%
fade(@color,50%) //...透明度为50%
spin(@color,10) // ...颜色比@color大10的色调
spin(@color,-10) // ...颜色比@color小10的色调
mix(@color1,@color2) //返回@color1与@color2的混合值
2、直接获取
hue(@color) //获取色相
saturation(@color) //获取饱和度
lightness(@color) //获取明度
- 检测函数
ispixel——是否为像素
ispercentage——是否为百分比
isem——是否为em
iscolor——是否为颜色
isnumber——是否为数字
isstring——是否为字符串
iskeyword——是否为keyword
isurl——是否为url
- 运算
可以利用加减乘除计算属性值以及颜色。
运算可以忽略单位(单位相同情况下)如:18px+13
#888+#123456
。
@the_color:#111; //less
@base_border:1px;
@color:#888;
#test{
color: @the_color *5;
border-right: @base_border+16;
border-right: @base_border *5;
}
#demo{
color: @color+#123456;
border-color: desaturate(@color,20%);
}