混合(Mixins)
混合(Mixin) 是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@color: red;
.father{
background:@color;
}
#son{
color: @color;
.father();
}
编译后 >>>
Mixins中的选择器
Mixins可以包含更多的属性,这些属性也能包含在选择器中
.kok(){
&:hover{
color: blue;
}
}
div{
.kok();
}
编译后 >>>
命名空间
可以在Mixins中指定多个属性作为子容器,方便拼接
#outer() {
.inner1 {
color: red;
}
.inner2{
color: blue
}
}
.c {
#outer > .inner1();
}
.d{
#outer > .inner2();
}
编译后 >>>
其他两种写法:
以 “ . ” 为连接符指定属性,有间隔 >>>
以 “ . ” 为连接符指定属性,无间隔 >>>
!important 关键词
!important关键词也能被继承,而且会依次遍历
扫描二维码关注公众号,回复:
11251595 查看本文章
参数传递
可以对Mixins进行传参
#outer(@color) {
color: @color;
}
.c{
#outer(red)
}
混合匹配选择器
@_表示默认选择,@switch会根据传参匹配相关的参数来编译成CSS样式
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
@switch: dark;
.class {
.mixin(@switch; #888);
}
函数功能
可以像js的函数一样进行传参和计算
.calc(@a,@b){
@result:(@a+@b);
}
div{
width:.calc(10,20)[@result];
}
混叠(Aliasing Mixins)
可以像设置js数组一样,设置多个可选择的组合
.color(){
primary:red;
secondary:grey;
}
div{
color:.color()[secondary];
}
以上就是less的变量知识总结,函数部分涉及变量和判断,我会单独放在下一章进行讲解