本节咱们学习混合守卫(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 逻辑运算符将条件进行关联。逻辑运算符有 andornot 三个。

  • 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 中的条件为参数小于等于 100pxdefault() 就等价于 @width <= 100px