本节咱们学习混合守卫(Mixins Guards),当咱们想在表达式上匹配简略值或参数数量时,Guards
将会很有用。为了尽可能地放弃 CSS 的申明性质,在 @media
查问个性规定中,Less 抉择 Guards
函数的模式而不是 if/ else
语句来实现条件执行。
示例:
咱们来看上面这个例子,定义了两个混合::
.common (@w; @h) when (@w >= 100px) {font-size: 18px;}
.common (@w; @h) {color: red;}
第一个混合带有条件判断,第二个混合不带有条件判断,上面咱们在两个款式类中援用上述的两个混合:
.one{.common(150px, 50px);
}
.two{.common(70px, 20px);
}
编译成 CSS 代码:
.one {
font-size: 18px;
color: red;
}
.two {color: red;}
能够看到,在 .one
中援用 .common
混合时,给 @w
参数赋值为 150px
,满足 @w >= 100px
条件,所以代码编译后,.one
款式类输入了两个混合中的款式属性。.two
款式类则相同,不满足 @w >= 100px
条件,最初只输入了不带条件判断的混合中的款式属性。
Guards 比拟运算符
Less 中蕴含五个 Guards
比拟运算符,别离是 >
,>=
,=
,=<
,<
。关键字 true
是让两个 Mixins
等价的惟一真值,所以以下两个 Mixins
是等价的:
.truth (@a) when (@a) {...}
.truth (@a) when (@a = true) {...}
除了关键字 true
,其余任何值都是假值:
.truth (@a) when (@a) {font-size: 14px;}
.one{.truth(true); // 只有 rue 为真值
}
.two{.truth(7); // 其余任何值都是假值
}
编译成 CSS 代码:
.one {font-size: 14px;}
也能够对两个变量进行比拟,例如咱们来看上面这个例子:
示例:
在 Mixins
中带有两个参数,如果参数 @a
的值大于 @b
,则 width
的值为 @a
,反之 width
的值为 @b
:
.xkd (@a; @b) when (@a > @b) {width: @a}
.xkd (@a; @b) when (@a < @b) {width: @b}
.one{.xkd(10px, 20px);
}
.two{.xkd(200px, 100px);
}
编译成 CSS 代码:
.one {width: 20px;}
.two {width: 200px;}
Guards 逻辑运算符
当 Mixins
的判断条件含有两个或多个时,能够应用 Guards
逻辑运算符将条件进行关联。逻辑运算符有 and
、or
、not
三个。
and
关键字:用于对两个条件取并集。
示例:
在 Mixins
中咱们给出了两个条件,一个是参数必须是色彩值,还有一个是必须是红色,只有同时满足这两个条件,才会输入 color
属性:
.xkd(@color) when (iscolor(@color)) and (@color = red) {color: @color;}
.one{.xkd(red);
}
.two{.xkd(blue);
}
编译成 CSS 代码:
.one {color: red;}
or
运算符:示意只有有一个条件为真就能够匹配,还能够应用,
运算符来代替or
。
示例:
在 Mixins
中有两个条件,一个是参数大于 50px
,一个是参数小于 200px
,只有满足其中一个条件,就能够胜利输入:
.xkd(@width) when (@width > 50px), (@width < 200px) {width: @width;}
.one{.xkd(100px);
}
.two{.xkd(20px);
}
编译成 CSS 代码:
.one {width: 100px;}
.two {width: 20px;}
not
关键字:用于否定条件。
示例:
在 Mixins
中给出了一个条件,参数大于 100px
,然而因为应用了 not
关键字来否定这个条件,所有只有满足小于 100px
就能胜利输入:
.xkd(@width) when not (@width > 100px) {width: @width;}
.one{.xkd(50px);
}
.two{.xkd(200px);
}
编译成 CSS 代码:
.one {width: 50px;}
default() 函数
default()
函数能够用于依据曾经创立好的的 Mixins
条件来造成该条件的补集。
示例:
.xkd(@width) when (@width > 100px) {width: @width;}
.other(@width) when (default()) {// default() 等价于 @width <= 100px
width: @width;
}
.one{.xkd(50px);
}
.two{.other(50px);
}
编译成 CSS 代码:
.two {width: 50px;}
上述代码中,在两个款式类中别离援用了 .xkd
和 .other
两个混合,而 .xkd
中的条件为参数大于 100px
,.other
中的条件为参数小于等于 100px
。default()
就等价于 @width <= 100px
。