当前位置: 首页 > Web前端 > CSS

Mixins和CSSGuards

时间:2023-03-30 18:50:49 CSS

当我们想要匹配一个表达式的简单值或参数数量时,我们可以使用Guards;它与mixin声明相关联,并包含附加到mixin的条件。每个mixin都会有一个或多个守卫,用逗号分隔,守卫必须用括号括起来。为了尽可能接近CSS的声明性本质,Less选择通过受保护的守卫而不是if/else语句执行来使用混入,并执行计算以指定匹配的混入。GuardComparisonOperatorsGuards中可用的比较运算符的完整列表是:>、>=、=、=<、<,加上关键字true是使这两个mixin等效的唯一真值。.compare(@a)when(@a){...}.compare(@a)when(@a=true){...}//除了关键字之外的任何true值都是fake.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}GuardLogicalOperators逻辑运算符可以和guards一起使用,语法基于CSSmedia查询。//1:使用and关键字组合守卫。mixin(@x)when(isnumber(@x))and(@x>0){...}//2:通过用逗号分隔守卫来模拟或操作如果任何守卫的计算结果为真,则认为它是匹配的。mixin(@x)when(@x>10),(@x<-20){...}//3:使用not关键字否定条件.mixin(@y)whennot(@y>0){...}类型检查函数如果我们想根据值类型匹配mixin那么我们可以使用is函数。.mixin(@x;@y:0)when(isnumber(@y)){...}.mixin(@x;@y:black)when(iscolor(@y)){...}基本类型检查函数:iscolorisnumberisstringiskeywordisurl如果你想检查一个值是否是一个数字,也使用特定的单位,你可以使用以下方法之一:ispixelispercentageisemisunit条件混合(fixme)此外,默认函数可用于混合基于其他混合匹配的匹配,我们可以使用它来创建类似于else或default语句(分别为if和case构造)的条件混合。.mixin(@x)when(@x>0){...}//只在第一个mixin不匹配时匹配,即@x<=0.mixin(@x)when(default()){...}CSSGuards也可以应用于css选择器,它是声明一个mixin然后立即调用它的语法糖。when(@mystyle=true){color:white;将保护直接应用于样式按钮}if通过与&功能结合使用来实现if类型的语句,允许我们对多个守卫进行分组。&when(@mystyle=true){按钮{颜色:白色;}a{颜色:绿色;}}