Mixin 和 CSS Guards

来源:http://www.chinese-glasses.com 作者:Web前端 人气:81 发布时间:2020-04-15
摘要:时间: 2019-09-28阅读: 101标签: mixin 本来说好上周末要出的这一篇结果拖到了现在,公司上需要做一个h5的游戏,最近这一周都在做这个游戏的单机demo,完全没时间来写这个文章。昨天算是

时间: 2019-09-28阅读: 101标签: mixin

本来说好上周末要出的这一篇结果拖到了现在,公司上需要做一个h5的游戏,最近这一周都在做这个游戏的单机demo,完全没时间来写这个文章。昨天算是把demo的大体完成了,今天可以抽出一点时间来整理这一部分。

当我们想在表达式上进行匹配简单的值或者是参数数量时,我们可以使用Guards;它与mixin声明相关联,并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护,并且guard必须括在括号中。


为了尽量接近CSS的声明性,Less选择了使用通过受保护的Guards的mixins而不是if / else语句执行,并执行计算以指定匹配的mixin。

Mixin Guards(mixin 监控)

带条件的mixins

当你想要匹配一个表达式的时候,guards是非常有用的。如果你熟悉函数式编程的话,那你很可能已经见过了。
为了尽可能的接近css的声明性性质,less选择实现条件化执行的方式,如:在media查询特性规范的结构中,使用 guards mixins代替if/else语句。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

关键在when这个关键词上,when这个关键词定义了监控原则(这里只有一个监控)。如果我们运行以下代码:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

编译为:
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Guard 比较运算符

guard中比较运算符

在guards中可用的运算符为: > , >= , = , =< , < 。此外,关键词true是唯一的真值,下面两个mixins相等:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除了关键词true以外,任何值都是假的:

.class {
  .truth(40); //不会匹配上面声明的语句
}

你也可以进行参数之间的比较,或者参数和非参数之间进行比较:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }

Guards中可用的比较运算符的完整列表为:,=,=,=,,此外关键字 true 是唯一的真实值,使这两个mixin等价。

guard中的逻辑运算符

你可以在guards中使用逻辑运算符,语法是基于css的媒体查询。
10bet,使用关键词 and 去连接guards:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

你可以模仿 or运算符通过使用逗号将guards进行分隔。如果任何guards被判断为真,会被进行匹配:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

使用关键词 not 与条件取反

.mixin (@b) when not (@b > 0) { ... }
 .compare (@a) when (@a) { ... } .compare (@a) when (@a = true) { ... } // 除关键字以外的任何值 true 都是伪造的 .xkd{ .compare(40); } // 可以将参数相互比较或与非参数进行比较 @media: mobile; .mixin (@x) when (@media = mobile) { ... } .mixin (@x) when (@media = desktop) { ... } .max (@x; @y) when (@x  @y) { width: @x } .max (@x; @y) when (@x  @y) { width: @y }

类型检查函数(Type Checking Functions)

最后,如果你想要基于类型来匹配mixins的话,你可以使用is函数:

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

下面是基本的类型检查函数:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
    如果你想要检查一个值是否在一个特定的单元中(不是当做数字),你可以使用:
  • ispixel
  • ispercentage
  • isem
  • isunit

Guard 逻辑运算符

有条件的mixins

另外,default函数可以根据其他mixin匹配来进行mixin匹配,您可以使用它创建类似于else或默认语句(分别是if和case结构)的“条件mixin”:

.mixin (@a) when (@a > 0) { ...  }
.mixin (@a) when (default()) { ... } // 只有第一个mixin不匹配时才会匹配这个

可以将逻辑运算符与防护一起使用,语法基于CSS媒体查询。

CSS Guards(css监控)

发布于v1.5.0
guards也可以用在css选择器上,这是一种语法糖,用于声明mixin,然后立即调用它。
在1.5.0之前你可能需要这样做:

.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style();

现在你可以直接在样式中使用guard

button when (@my-option = true) {
  color: white;
}

你也可以通过结合这个和&特性,从而实现一个if类型语句,允许组合多个guards:

& when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}
 // 1:使用and关键字来组合保护 .mixin (@x) when (isnumber(@x)) and (@x  0) { ... } // 2:通过用逗号分隔保护来模拟或运算符,如果任何一个守卫评估为true,则认为是匹配 .mixin (@x) when (@x  10), (@x  -20) { ... } // 3:使用not关键字否定条件 .mixin (@y) when not (@y  0) { ... }

类型检查函数

如果要根据值类型匹配混合,那么我们可以使用 is 功能。

 .mixin (@x; @y: 0) when (isnumber(@y)) { ... } .mixin (@x; @y: black) when (iscolor(@y)) { ... }

本文由10bet发布于Web前端,转载请注明出处:Mixin 和 CSS Guards

关键词:

上一篇:2017-310bet-22 less

下一篇:没有了

频道精选

最火资讯