less匹配模式 | 易学教程

文章目录

less匹配模式：
函数+运算

参考：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%); 
}

来源：CSDN

作者：开水没有春天

链接：https://blog.csdn.net/weixin_42995876/article/details/103763541

标签

less

模式匹配

test