less新手入门(四)—— Mixin Guards
- 有条件的 mixin
当您想要匹配表达式时,相对于简单的值或特性,Guards是有用的。如果您熟悉函数式编程,您可能已经遇到过它们。
为了尽可能地保持CSS的声明性质,在@ media查询特性规则中,Less选择通过保护的mixin而不是if/ elsestatements 来执行条件执行。
.mixin (@a) when (lightness(@a) >= 50%){
background-color: black;
} .mixin(@a) when (lightness(@a) < 50%){
background-color: white;
} .mixin(@a){
color: @a;
}
关键字是when关键字,它引入了一个守卫序列(这里只有一个guard)。现在,如果我们运行以下代码:
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
输出:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
8.1 guard 比较运算符
在guard 可用的比较操作符的完整列表为:>、> =、=、<、<、<。另外,关键字true是唯一的truthy值,判断是否这两个参数值相等:
.truth(@a) when (@a){
font-size: 12px;
} .truth(@a) when (@a = true){
font-size: 26px;
}
除了关键字 true 以外的任何值都是假的:
.class3{
.truth(40); // 不会匹配到上面任何一个
}
守卫可以用逗号分开,如果任何一个判断语句的计算结果为真,它被认为是一种匹配:
.mixin (@a) when (@a > 10), (@a < -10) { ... }
注意,您还可以比较彼此的参数,或者用非参数进行比较
@media: mobile; .mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... } .max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
8.2 类型检查功能
最后,如果想要根据值的类型来匹配mixin,可以使用is函数
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }
下面是一些基本类型检查函数:
iscolor
isnumber
isstring
iskeyword
isurl
如果您想要检查一个值是否在一个特定的单元中,除了作为一个数字之外,您可以使用其中一个:
ispixel
ispercentage
isem
isunit
8.3 有条件的混合
此外,default
函数可以用于根据其他混合匹配创建mixin匹配,您可以使用它来创建类似于else或default语句的“条件混合”(if和case结构)。
.mixin (@a) when (@a > 0) { ... }
.mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0
最后但并非最不重要的是,您可以使用 and 关键字来为一个警卫提供额外的条件:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
最后,not 关键字的否定条件:
.mixin (@b) when not (@b > 0) { ... }
less新手入门(四)—— Mixin Guards的更多相关文章
- 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■ CLI是Command-Lin ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
- 【原创】新手入门一篇就够:从零开发移动端IM
一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...
- 课程上线 -“新手入门 : Windows Phone 8.1 开发”
经过近1个月的准备和录制,“新手入门 : Windows Phone 8.1 开发”系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microsoftvirtuala ...
- 【原创】NIO框架入门(四):Android与MINA2、Netty4的跨平台UDP双向通信实战
概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...
- iOS简易柱状图(带动画)--新手入门篇
叨逼叨 好久没更新博客了,才几个月,发生了好多事情,处理了好多事情.不变的是写代码依然在继续. 做点啥子 看看objective-c的书,学着写了个柱状图,只是练习的demo而已,iOS上的图表控件已 ...
- [转载]新手入门:Spring的一些学习方法及意见
原文地址:新手入门:Spring的一些学习方法及意见作者:飞扬飞扬xyz Spring简介: 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您 ...
- Xorboot-UEFI新手入门教程
Xorboot-UEFI新手入门教程 Xorboot-UEFI是一款UEFI下轻量级的图形化多系统引导程序,pauly于2014年国庆节期间发布了预览版.搜了下论坛,关于Xorboot- ...
- 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
随机推荐
- IDA-IDC脚本编写语法
1.IDA脚本编写基础 IDC是IDA内置的脚本语言,其语法与C非常相似,它是一种解释性语言. 执行方法 在IDA中按SHIFT+F2键会弹出一个对话框,把语句直接写在对话框中,点击run就可被运行. ...
- stl lower_bound()和up_bound()
iter=data.erase(iter);删掉 转载:http://www.cnblogs.com/cobbliu/archive/2012/05/21/2512249.html STL中的每个算法 ...
- UVA 116_ Unidirectional TSP
题意: 给定整数矩阵,从第一列的任何一个位置出发,每次可以向右.右上.右下走一个格,将最后一行和第一行看成是邻接的,最终到达最后一列,路径长度为所经过格中的整数之和,求最小路径,答案不唯一,输出字典序 ...
- 洛谷 P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀…
P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀… 题目背景 欢迎提供翻译,请直接在讨论区发帖,感谢你的贡献. 题目描述 You have probably hea ...
- MySQL JDBC URL参数(转)
MySQL的 JDBC URL格式: jdbc:mysql://[host][,failoverhost...][:port]/[database] » [?propertyName1][=prope ...
- Memcached与Spring集成的方式(待实践)
主要是基于这几种方式http://www.cnblogs.com/EasonJim/p/7624822.html去实现与Spring集成,而个人建议使用Xmemcached去集成好一些,因为现在官方还 ...
- 苹果装WIN 7
一.准备:1.8G或以上的正版U盘或者移动硬盘,提前备份U盘数据(2013款air要求安装64位系统,市面上比较多U盘不是正版盘,一般做不成功,要换盘) 2.64位纯净版Windows7 ISO的下载 ...
- 功能超级强大的网络工具nc
摘自:http://www.linuxso.com/command/nc.html 功能说明:功能强大的网络工具语 法:nc [-hlnruz][-g<网关...>][-G<指向器数 ...
- http://www.cnblogs.com/sprinkle/
http://www.cnblogs.com/sprinkle/ http://www.cnblogs.com/sprinkle/
- 集成环信时遇到的问题file not found: libEaseMobClientSDK.a
集成环信时遇到的问题 build setting环信SDK集成libEaseMobClientSDKL file not found: libEaseMobClientSDK.a clang: er ...