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. layim+signalr2.0在线轻聊版解决方案

    本内容有版权限制,仅提供学习交流参考等等,请勿随便转载或者代码商用.     /** layui-v2.1.5 MIT License By http://www.layui.com */; layu ...

  2. [解读REST] 6.REST的应用经验以及教训

    衔接上文[解读REST] 5.Web的需求 & 推导REST,上文根据Web的需求推导出了REST架构风格,以及REST的详细描述和解释.自从1994年以来,REST架构风格被用于指导Web架 ...

  3. 使用EF操作Mysql数据库中文变问号的解决方案

    问题场景:使用Entity Framework 6.0 操作Mysql数据库,中文保存至数据库后全部变成问号.但是使用Mysql API却不会. 原因排查:首先想到的肯定是数据库编码问题,一次查询了表 ...

  4. 《HelloGitHub》第 19 期

    前言 最近很少写博客了,工作上的事情太多(在做一些数据分析方面的工作,之前是 Web 开发),时间捉襟见肘.更多的时间都花在工作上,没有精力.时间积累整理知识.说来还是能力太差.效率有问题. 后面会好 ...

  5. sql语句如何查询一个表中某两个字段的相同数据?

    Select Name,ID From A group by Name,ID having count (*)>1

  6. Python Web框架篇:Django Form组件

    Form简介 在HTTP中,表单(form标签),是用来提交数据的,其action属性说明了其传输数据的方法:如何传.如何接收. 访问网站时,表单可以实现客户端与服务器之间的通信.例如查询,就用到了表 ...

  7. 面试题----寻找比一个N位数大的“下”一个数

    题目描述 写出一个算法,实现如下功能: 给定一个N位数字组成的数,找出比这个数大的由相同数字组成的下一个数 例如:如果数字为 25468, 则结果为25486 如果数字为 21765, 则结果为 25 ...

  8. 使用sklearn进行数据挖掘-房价预测(6)—模型调优

    通过上一节的探索,我们会得到几个相对比较满意的模型,本节我们就对模型进行调优 网格搜索 列举出参数组合,直到找到比较满意的参数组合,这是一种调优方法,当然如果手动选择并一一进行实验这是一个十分繁琐的工 ...

  9. visual studio 2013使用github获取代码

    如图点击"视图""团队资源管理器".   点击主页上方的那个插头形状按钮"连接到团队项目".点击"克隆"   然后在克隆 ...

  10. js图片延迟加载如何实现

      这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示. 大概的实现方式是: 在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的sr ...