Less的条件表达式Guards

当需要根据表达式，而不是参数的值或数量进行匹配时，条件表达式（Guards）就显得非常有用。如果你熟悉函数式编程的话，对条件表达式也不会陌生。

为了尽可能地接近CSS的语言结构，Less使用关键字 when 而不是 if/else来实现条件判断，因为 when 已经在CSS的 @media query 特性中被定义。

表达式中可以使用比较运算符、逻辑运算符、或检查函数来进行条件判断。

1、比较运算符

Less包含五个比较运算符：<、>、<=、>=、=，可以使用比较运算符（=）来比较数字，字符串、标识符等，而其余的运算符只能与数字一起使用。如，以下Less代码：

.mixin (@a) when (@a = 20px){
color:red;
}
.mixin (@a) when (@a < 20px){
color:blue;
}
.mixin (@a) {
font-size: @a;
}
h2 {
.mixin(20px)
}

编译后的CSS代码为：

h2 {
color: red;
font-size: 20px;
}

此外，还可以使用关键字true，它表示布尔真，以下两个mixin是相同的：

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

在Less中，只有 true 表示布尔真，关键字true以外的任何值，都被视为布尔假。如：

.class {
.truth(40); // 不会匹配以上任何定义
}

Less中，Guards可以是多个表达式，多个表达式之间，使用逗号‘,’分隔。如果其中任意一个表达式的结果为 true，则匹配成功，这就相当于“或”的关系。如：

.mixin (@a) when (@a < -10), (@a > 10) {
width: 100px;
}

上述Guards就表示： [-10,10] 之间的值将匹配失败，其余均匹配成功。比如以下调用，.class1 和 .class3 会匹配成功，.class2 将匹配失败：

.class1 {
.mixin(-20);
}
.class2 {
.mixin(0);
}
.class3 {
.mixin(20);
}

编译后的CSS代码为：

.class1 {
width: 100px;
}
.class3 {
width: 100px;
}

2、逻辑运算符

Less中，Guards也可以使用 and 和 not 来进行逻辑运算。如，以下Less代码：

.mixin (@a) when (@a > 50%) and (@a > 5px){
font-size: 14px;
}
.mixin (@a) when not (@a < 50%) and not (@a < 5px){
font-size: 20px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}

编译后的CSS代码为：

.class1 {
color: #ff0000;
}
.class2 {
color: #555555;
}

3、检查函数

如果想基于值的类型、或特定的单位进行匹配，就可以使用 is* 函数。如：

.mixin (@a, @b: 0) when (isnumber(@a)) { ... }
.mixin (@a, @b: black) when (iscolor(@b) and (@a > 0)) { ... }

以下是常见的类型检查函数：

Iscolor：是否为颜色值。
Isnumber：是否为数值。
Isstring：是否为字符串。
Iskeyword：是否为关键字。
Isurl：是否为URL字符串。
以下是常见的单位检查函数：
Ispixel：是否为像素单位。
ispercentage：是否为百分比。
isem：是否为em单位。
isunit：是否为单位。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Less的条件表达式Guards相关推荐

2021年大数据常用语言Scala（七）：基础语法学习条件表达式
条件表达式条件表达式就是if表达式,if表达式可以根据给定的条件是否满足,根据条件的结果(真或假)决定执行对应的操作.scala条件表达式的语法和Java一样. 有返回值的if 与Java不一样的是 ...
改善代码设计 —— 简化条件表达式(Simplifying Conditional Expressions)
系列博客 1. 改善代码设计 -- 优化函数的构成(Composing Methods) 2. 改善代码设计 -- 优化物件之间的特性(Moving Features Between Objects) ...
JAVA条件表达式的陷阱
Map<String, Integer> map = new HashMap<String, Integer>(); map.put("count", n ...
django 1.8 官方文档翻译：2-5-9 条件表达式
条件表达式 New in Django 1.8. 条件表达式允许你在过滤器.注解.聚合和更新操作中使用 if ... elif ... else的逻辑.条件表达式为表中的每一行计算一系列的条件,并且返 ...
shell中的条件表达式
条件表达式返回的结果都为布尔型真为1,假为0 条件测试的表达式 [expression] [[expression]] test expression 这三种条件表达式的效果是一样的比较符整数比 ...
【C语言探索之旅】第一部分第六课：条件表达式
内容简介 1.课程大纲 2.第一部分第六课:条件表达式 3.第一部分第七课预告:循环语句课程大纲我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...
python 条件表达式换行_Python基础语法 - LongKing-Xu的个人空间 - OSCHINA - 中文开源技术交流社区...
python基础语法一.标识符在Python中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. 在Python中的标识符是区分大小写的. 在Python中以下划线开头的标识符是有 ...
python条件表达式有哪几个_python条件表达式:多项分支,双向分支
# ### 多项分支 ''' if 条件表达式1: code1 code2 elif 条件表达式2: code3 code4 elif 条件表达式3: code5 code6 else: code7 ...
重构——39以多态取代条件表达式（Replace Conditional with Polymorphism）
以多态取代条件表达式(Replace Conditional with Polymorphism) 你手上有个条件表达式,它根据对象类型的不同而选择不同的行为:将这个条件表达式的每个分支放进一个子类内 ...

Less的条件表达式Guards

Less的条件表达式Guards相关推荐

最新文章

热门文章