Less的条件表达式

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

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

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

1、比较运算符

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

  1. .mixin (@a) when (@a = 20px){
  2.     color:red;
  3. }
  4. .mixin (@a) when (@a < 20px){
  5.     color:blue;
  6. }
  7. .mixin (@a) {
  8.     font-size: @a;
  9. }
  10. h2 {
  11.     .mixin(20px)
  12. }

编译后的CSS代码为:

  1. h2 {
  2.   color: red;
  3.   font-size: 20px;
  4. }

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

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

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

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

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

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

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

  1. .class1 {
  2.    .mixin(-20);
  3. }
  4. .class2 {
  5.    .mixin(0);
  6. }
  7. .class3 {
  8.    .mixin(20);
  9. }

编译后的CSS代码为:

  1. .class1 {
  2.   width: 100px;
  3. }
  4. .class3 {
  5.   width: 100px;
  6. }

2、逻辑运算符

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

  1. .mixin (@a) when (@a > 50%) and (@a > 5px){
  2.     font-size: 14px;
  3. }
  4. .mixin (@a) when not (@a < 50%) and not (@a < 5px){
  5.     font-size: 20px;
  6. }
  7. .mixin (@a) {
  8.     color: @a;
  9. }
  10. .class1 {
  11.     .mixin(#FF0000)
  12.  }
  13. .class2 {
  14.     .mixin(#555)
  15. }

编译后的CSS代码为:

  1. .class1 {
  2.   color: #ff0000;
  3. }
  4. .class2 {
  5.   color: #555555;
  6. }

3、检查函数

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

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

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

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

Less的条件表达式的更多相关文章

  1. [Django]模型提高部分--聚合(group by)和条件表达式+数据库函数

    前言:本文以学习记录的形式发表出来,前段时间苦于照模型聚合中group by 找了很久,官方文章中没有很明确的说出group by,但在文档中有提到!!! 正文(最后编辑于2016-11-12): 聚 ...

  2. Scala:条件表达式的好处

    条件表达式的好处之一是:让代码更简洁,例如在一个需要根据不同条件收集不同值的场景中,多数语言提供的代码如下: ; ) { tmp = xxx; } ) { tmp = yyy; } else { tm ...

  3. Shell 条件表达式汇总

    条件表达式 文件表达式 if [ -f  file ]    如果文件存在if [ -d ...   ]    如果目录存在if [ -s file  ]    如果文件存在且非空 if [ -r f ...

  4. shell之条件表达式

    conditional expressions are used by the [[ compound command and the test and [ builtin commands. ari ...

  5. Python学习教程(learning Python)--3.3 分支语句的条件表达式详解

    本节主要讨论分支语句的条件表达式问题. 在if或者if-else分支控制语句里由于都用到条件判断(表达式是真还是假),条件判断可以是一种关系运算也可以是布尔表达式. 本节将对if及if-else语句的 ...

  6. golang没有条件表达式?:

    详见The Go Programming Language Specification中Expressions一章中未提及此表达式, 故其不支持. 再强调一次, GO不支持条件表达式 conditio ...

  7. thymeleaf条件表达式

    条件表达式形式:condition, then and else <tr th:class="${row.even}? 'even' : 'odd'"> ... < ...

  8. SQL条件表达式

    需求:数据表中如果满足某个条件,返回表中所有数据,否则不返回数据. 语法:CASE 表达式是一种通用的条件表达式,类似于其它语言中的 if/else 语句. CASE WHEN condition T ...

  9. c语言条件表达式误区1

    #include <stdio.h> #include <stdlib.h> //综合1 和 2我们知道牢记条件表达式中常量写在左边的语法规则 以防因为疏忽造成难以查找的错误 ...

  10. 【C语言探索之旅】 第一部分第六课:条件表达式

    内容简介 1.课程大纲 2.第一部分第六课:条件表达式 3.第一部分第七课预告:循环语句 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...

随机推荐

  1. nodejs里的module.exports和exports

    引 在node.js中我们可以使用module.exports和exports导出模块,设置导出函数.数组.变量等等 为什么可以用这两个模块? 或者直接问,node.js的模块功能是怎么实现的. 这样 ...

  2. UVa1630,Folding

    区间dp,记忆化搜就可以 st为原串 dp[p][q]存st[p]~st[q]的最优长度,f[p][q]存对应的最优串 从(0,len-1)开始搜,f[0][len-1]为所求ans,回溯条件为p== ...

  3. 【计算机网络】 一个小白的DNS学习笔记

    参考书籍 <计算机网络-自顶向下>  作者 James F. Kurose   DNS的作用   DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到IP地址映射的查询服务 ...

  4. 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 ...

  5. eclipse项目中引入shiro-freemarker-tags会jar包冲突

    maven项目中引入了这个依赖. <dependency> <groupId>net.mingsoft</groupId> <artifactId>sh ...

  6. Install a Jenkins on Ubuntu system

    ================================================================================ Jenkins Environment ...

  7. [Scikit-learn] 4.4 Dimensionality reduction - PCA

    2.5. Decomposing signals in components (matrix factorization problems) 2.5.1. Principal component an ...

  8. NFS启动时报错Linux NFS:could not open connection for tcp6

    1.1 启动时出现的错误 [root@znix ~]#/etc/init.d/nfs start Shutting down NFS daemon:                          ...

  9. HTML超连接的使用

    1,基本语法:<a href="" target="打开方式" name ="页面锚点名称">连接文字或者图片</a> ...

  10. svg snap 笔记

    路径中的字母,大写相对于左上角绝对定位,小写相对定位  M110,95,95,110M115,100,100,115   pattern 类似于图片拼贴,可以把指定位置的图案用来填充 var patt ...