今天小编跟大家讲解下有关Mixin 和 CSS Guards ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Mixin 和 CSS Guards 的相关资料，希望小伙伴们看了有所帮助。
当我们想在表达式上进行匹配简单的值或者是参数数量时，我们可以使用Guards；它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。
为了尽量接近css的声明性，Less选择了使用通过受保护的Guards的mixins而不是if / else语句执行，并执行计算以指定匹配的mixin。
Guard 比较运算符Guards中可用的比较运算符的完整列表为：>，>=，=，=<，<，此外关键字 true 是唯一的真实值，使这两个mixin等价。
.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 }Guard 逻辑运算符可以将逻辑运算符与防护一起使用，语法基于css媒体查询。
// 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)) { ... }基本的类型检查功能：
iscolorisnumberisstringiskeywordisurl如果要检查值是否是数字，是否还使用特定单位，则可以使用以下方法之一：
ispixelispercentageisemisunit条件混合（fixme）另外，默认函数可用于根据其他混合匹配进行混合匹配，并且我们可以使用它创建类似于else或默认语句（分别是if和case结构）的条件混合。
.mixin (@x) when (@x > 0) { ... } // 仅当第一个mixin不匹配时匹配，[email protected]<=0时 .mixin (@x) when (default()) { ... } css Guards保护也可以应用于css选择器，这是声明mixin然后立即调用它的语法糖。
直接将保护应用于样式
button when (@mystyle = true) { color: white;}if 通过将其与 & feature结合使用来实现if-type语句，从而允许我们对多个防护进行分组。
& when (@mystyle = true) { button { color: white; } a { color: green; }}来源：爱蒂网
