Less的条件表达式
Less的条件表达式
当需要根据表达式,而不是参数的值或数量进行匹配时,条件表达式(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:是否为单位。
Less的条件表达式的更多相关文章
- [Django]模型提高部分--聚合(group by)和条件表达式+数据库函数
前言:本文以学习记录的形式发表出来,前段时间苦于照模型聚合中group by 找了很久,官方文章中没有很明确的说出group by,但在文档中有提到!!! 正文(最后编辑于2016-11-12): 聚 ...
- Scala:条件表达式的好处
条件表达式的好处之一是:让代码更简洁,例如在一个需要根据不同条件收集不同值的场景中,多数语言提供的代码如下: ; ) { tmp = xxx; } ) { tmp = yyy; } else { tm ...
- Shell 条件表达式汇总
条件表达式 文件表达式 if [ -f file ] 如果文件存在if [ -d ... ] 如果目录存在if [ -s file ] 如果文件存在且非空 if [ -r f ...
- shell之条件表达式
conditional expressions are used by the [[ compound command and the test and [ builtin commands. ari ...
- Python学习教程(learning Python)--3.3 分支语句的条件表达式详解
本节主要讨论分支语句的条件表达式问题. 在if或者if-else分支控制语句里由于都用到条件判断(表达式是真还是假),条件判断可以是一种关系运算也可以是布尔表达式. 本节将对if及if-else语句的 ...
- golang没有条件表达式?:
详见The Go Programming Language Specification中Expressions一章中未提及此表达式, 故其不支持. 再强调一次, GO不支持条件表达式 conditio ...
- thymeleaf条件表达式
条件表达式形式:condition, then and else <tr th:class="${row.even}? 'even' : 'odd'"> ... < ...
- SQL条件表达式
需求:数据表中如果满足某个条件,返回表中所有数据,否则不返回数据. 语法:CASE 表达式是一种通用的条件表达式,类似于其它语言中的 if/else 语句. CASE WHEN condition T ...
- c语言条件表达式误区1
#include <stdio.h> #include <stdlib.h> //综合1 和 2我们知道牢记条件表达式中常量写在左边的语法规则 以防因为疏忽造成难以查找的错误 ...
- 【C语言探索之旅】 第一部分第六课:条件表达式
内容简介 1.课程大纲 2.第一部分第六课:条件表达式 3.第一部分第七课预告:循环语句 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...
随机推荐
- nodejs里的module.exports和exports
引 在node.js中我们可以使用module.exports和exports导出模块,设置导出函数.数组.变量等等 为什么可以用这两个模块? 或者直接问,node.js的模块功能是怎么实现的. 这样 ...
- UVa1630,Folding
区间dp,记忆化搜就可以 st为原串 dp[p][q]存st[p]~st[q]的最优长度,f[p][q]存对应的最优串 从(0,len-1)开始搜,f[0][len-1]为所求ans,回溯条件为p== ...
- 【计算机网络】 一个小白的DNS学习笔记
参考书籍 <计算机网络-自顶向下> 作者 James F. Kurose DNS的作用 DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到IP地址映射的查询服务 ...
- ubuntu16.04 配置opensips服务器并编译pjsip测试
一.版本相关 1) ubuntu版本: 16.04 2) opensips版本:2.1.2 3) pjsip版本 :2.5.5 4) ffmpeg版本:3.3.4 5) sdl版本:2.0 6) vs ...
- eclipse项目中引入shiro-freemarker-tags会jar包冲突
maven项目中引入了这个依赖. <dependency> <groupId>net.mingsoft</groupId> <artifactId>sh ...
- Install a Jenkins on Ubuntu system
================================================================================ Jenkins Environment ...
- [Scikit-learn] 4.4 Dimensionality reduction - PCA
2.5. Decomposing signals in components (matrix factorization problems) 2.5.1. Principal component an ...
- NFS启动时报错Linux NFS:could not open connection for tcp6
1.1 启动时出现的错误 [root@znix ~]#/etc/init.d/nfs start Shutting down NFS daemon: ...
- HTML超连接的使用
1,基本语法:<a href="" target="打开方式" name ="页面锚点名称">连接文字或者图片</a> ...
- svg snap 笔记
路径中的字母,大写相对于左上角绝对定位,小写相对定位 M110,95,95,110M115,100,100,115 pattern 类似于图片拼贴,可以把指定位置的图案用来填充 var patt ...