简单概括

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，其属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性

一.用法

1.变量

@w:200px;
@h:200px;
//宽高
.box{
    border:2px solid red;
    width:@w;
    height: @h*(1/2);
}

<div class="box"></div>

2.混合（Mixins）

@backcolor:red;
@color:black;
@radius:20px;
.ht{
    background-color: @backcolor;
    color:@color;
    border-radius: @radius*(1/2);
}
.ht1{
    background-color: @backcolor;
    color:@color;
    border-radius: @radius*(1/2);
}

<button class="ht">按钮</button> 
<button class="ht1">按钮</button>

进行调用函数

@backcolor:red;
@color:black;
@radius:20px;
.ht{
    .setcolor;
    .setradius;
}
.ht1{
    .setcolor;
    .setradius;
}
.setcolor{
    background-color: @backcolor;
    color: @color;
}
.setradius{
    border-radius: @radius*(1/2);
}

<button class="ht">按钮</button> 
<button class="ht1">按钮</button>

3.嵌套（Nesting）

子父级元素的css写法 好维护
& 代表当前元素

.info{
    width:@w*2;
    height: @h;
    border:3px solid blue;
    li{
        size: 20px;
    
    span{
      font-size:40px;
    }
    &.name{
        font-size:40px;
    }
    }
}

 <ul class="info">
        <li>王三</li>
        <li><span>丽丽</span></li>
        <li><span class="name">赵四</span></li>
 </ul>

4.运算（Operations）

cb:#fff * (0.5);
@size:10px;
body{
    font-size:@size * 2 ;
    background-color:@cb;
    color: @cb;
}

二.less里的内置函数

1.if

@w:200px;
@h:200px;
@m:-10;
.box{
    border:3px solid blue;
    width:if(@m>0,@w,@w*(1/2));
    height: @h;
}

<div class="box"></div>

bollean() 返回true false 布尔型

@bool:boolean(@max>0);
 .box{
     width:if(@bool,@w,@w * 2);
     height:if(@bool,@w,@w * 2);
     border: 1px solid #000;
 }

<div class="box"></div>

2.escape()

参数string 有些定数字符不能编码 进行字符串编码的

 @color:#cbcbcb;
 border: 1px solid escape(@color);

3.length()

返回长度 值长度

@str:red,blue,black;
 .box{
     width: length(@str);
 }

4.extract

返回集合值 里面某个位置的值

@str:red,blue,black;
.box{
    background-color: extract(@str,2);
 }

5.range()

写一个参数 返回当前值以下的值 三个参数 start end step

range(4)   1 2 3 4
range(10px,40px,10)  //10 20 30 40

6.each

遍历集合值 value 指当前值 index 当前值索引 1+ (key)

@str:red,blue,black;
each(@str,{
     .box@{index}{
         width: @key;
         background-color: @value;//绑定属性值   @value
     }
 });

7.数值

ceil 向上取整
floor 向下取整
percentage 取百分比的
round 四舍五入
sqrt 开平方
abs 绝对值
min 取最小值
max 取最大值的

8.检测

isnumber() 检测值是否是数字类型
isstring() 检测是否是字符串
iscolor() 检测是否是颜色
isurl(url(…)) 检测是否是路径 url()

9.颜色

rgb()
rgba()
hsl(0,100%,50%)
hsla(0,100%,50%,0.5);
hsv(0,100%,50%);
hsva(0,100%,50%,0.5);

获取颜色中对应参数
lightness(hsl(90, 100%, 50%)) 50%
saturation(hsl(90, 100%, 50%)) 100%
hue(hsl(90, 100%, 50%)) 90

获取颜色对应的通道值
red(rgb(0,10,255)) 0
green(rgb(0,10,255)) 10
blue(rgb(0,10,255)) 255
获取颜色中透明度方法
alpha(rgba(0,10,255,0.5)) 0.5

色彩融合方法 multiply
multiply(#fff,#000) #fff * #000 最终颜色除255 颜色变深
screen() 两个颜色混合 更浅

overlay(rgb(138, 128, 128),rgb(241, 14, 14)) 比暗色更暗 亮色更亮softlight(rgb(109, 224, 42),#0ef1e6) 两个色混合之后 更柔和
hardlight(rgb(109, 224, 42),#0ef1e6) 高亮
difference(rgb(109, 224, 42),#0ef1e6) 两个相减 负值 取反向
exclusion(rgb(109, 224, 42),#0ef1e6) 混合色
average(rgb(109, 224, 42),#0ef1e6) 平均色
negation(#ff6600, #000000); difference反方法