Less

Posted 2020-08-14

Less是css的一种扩展技术，基于css语法之上，引入了变量，混入，运算以及函数等，简化了css的代码，降低维护成本
1、 变量
@名称:值
属性名：@名称
@border:1px solid black;
@background:green;
@outline:1px solid black;

div{
border:@border;
background: @background;
}

2、混合Mixins(针对通用的属性集,多个不同属性)，.名称{属性名+属性值（声明）}
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。
class属性集
.widthHeight{
width: 200px;
height: 200px;
}
id属性集
#fontsize{
font-size: 30px;
}

元素属性集
div{
font-weight: bolder;
}

div{
.widthHeight;
#fontsize;
}

3、带参数的混合(调用多个参数，值可变,属性集合)，.名称（参数）{属性名：参数}
调用参数
.backgroundUrl(@url){
background: @url;
}
4、给参数设置默认值
.borderRadius(@length:10px){
border-radius: @length;
-webkit-border-radius: @length;
-moz-border-radius: @length;
}

div{
.backgroundUrl(url("1.jpg"));
.borderRadius;
}

5、不带参数的属性集

.pAll(){
font-size: 40px;
color: #0000FF;
font-weight: bolder;
border: 1px solid black;
width: 100px;
height: 100px;
}

p{
.pAll;
}

6、多参数混合
使用逗号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。
2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。
3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。
使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。
逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。
使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)，那么所有只强制要求一个参数的混合都会被调用：

多参数混合
.mixin(@margin;@padding){
margin: @margin;
padding: @padding;
}
p{
.mixin(50px;100px)
}