【LESS系列】高级特性——模式匹配

前面我已经有一篇文章是写 LESS 的基础语法的。

那么这一次我们来看一下 LESS 的高级特性。

虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时候,有它们在的话,还是能够让我们开发得更得心应手的。

其实传参设置默认值,就是一个最简单的模式匹配。

你调用 Mixins 函数,传入参数,和不传入参数,可能会出现不同的编译结果。

那么除此之外,模式匹配还有那些情况呢,让我们来看一下。

按照先前的惯例,LESS CODE 和 CSS CODE 分别是编译前跟编译后的代码。

1.用不同参数个数来匹配不同的 Mixins

/* LESS CODE */
.test(@size){
  width: @size;
}
.test(@size, @multiple){
  width: @size * @multiple;
}

.el-a{
  .test(10px);
}
.el-b{
  .test(10px, 2);
}
/* CSS CODE */
.el-a {
  width: 10px;
}
.el-b {
  width: 20px;
}

2.用常量参数来匹配不同的 Mixins

/* LESS CODE */
.test(large, @size: 10px){
  width: @size * 2;
}
.test(simple, @size: 10px){
  width: @size;
}
.test(@_, @size: 10px){
  display: block;
}

.el-a{
  .test(large);
}
.el-b{
  .test(simple);
}
/* CSS CODE */
.el-a {
  width: 20px;
  display: block;
}
.el-b {
  width: 10px;
  display: block;
}

以下是整个过程如何发生的:

第一个 .test 只有在满足 large 条件才会被匹配;

第二个 .test 只有在满足 simple 条件才会被匹配;

第三个 .test 在任何条件下,甚至是 large 和 simple 以外的条件下都会被匹配,只要满足传参规则就可以了(.test 要求传入1~2个参数);

只要是满足匹配要求的 Mixins,都会被使用。

变量可以匹配任何值,而常量只有在传入的值与之完全相等时才可以匹配成功。

3.

时间: 2024-10-11 16:16:28

【LESS系列】高级特性——模式匹配的相关文章

Zookeeper系列五:Master选举、ZK高级特性:基本模型

一.Master选举 1. master选举原理: 有多个master,每次只能有一个master负责主要的工作,其他的master作为备份,同时对负责工作的master进行监听,一旦负责工作的master挂掉了,其他的master就会收到监听的事件,从而去挣脱负责工作的权利,其他没有争夺到负责主要工作的master转而去监听负责工作的新master. 本质其实是利用zookeeper的临时节点的特性:临时节点随着会话的消亡二消亡,同一个临时节点只能创建一个,创建失败的节点(从master)对创

Python高级特性(3): Classes和Metaclasses(转)

原文:Python高级特性(3): Classes和Metaclasses 类和对象 类和函数一样都是Python中的对象.当一个类定义完成之后,Python将创建一个“类对象”并将其赋值给一个同名变量.类是type类型的对象(是不是有点拗口?). 类对象是可调用的(callable,实现了 __call__方法),并且调用它能够创建类的对象.你可以将类当做其他对象那么处理.例如,你能够给它们的属性赋值,你能够将它们赋值给一个变量,你 可以在任何可调用对象能够用的地方使用它们,比如在一个map中

Python高级特性(1):Iterators、Generators和itertools(转)

译文:Python高级特性(1):Iterators.Generators和itertools [译注]:作为一门动态脚本语言,Python 对编程初学者而言很友好,丰富的第三方库能够给使用者带来很大的便利.而Python同时也能够提供一些高级的特性方便用户使用更为复杂的数据结构.本系 列文章共有三篇,本文是系列的第一篇,将会介绍迭代器.生成器以及itertools模块的相关用法.由于作者 Sahand Saba 列举的示例中有诸多专业的数学相关内容,因此翻译中有诸多不妥之处请大家指出,非常感谢

(升级版)Spark从入门到精通(Scala编程、案例实战、高级特性、Spark内核源码剖析、Hadoop高端)

本课程主要讲解目前大数据领域最热门.最火爆.最有前景的技术——Spark.在本课程中,会从浅入深,基于大量案例实战,深度剖析和讲解Spark,并且会包含完全从企业真实复杂业务需求中抽取出的案例实战.课程会涵盖Scala编程详解.Spark核心编程.Spark SQL和Spark Streaming.Spark内核以及源码剖析.性能调优.企业级案例实战等部分.完全从零起步,让学员可以一站式精通Spark企业级大数据开发,提升自己的职场竞争力,实现更好的升职或者跳槽,或者从j2ee等传统软件开发工程

Visual Studio 2015 速递(4)——高级特性之移动开发

系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studio 2015速递(3)——ASP.NET 新特性 说是VS2015的高级特性,其实也高级不到哪里,看起来确实“高大上”,正如BUILD2015上演示的那样,你真的可以只用VS2015就可以“通吃”各种移动设备应用了,当然,是有条件的“通吃”,微软给了一系列的解决方案,来辅助完成这一目标. 首先我们来

Redis基础、高级特性与性能调优

本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导.本文适合使用Redis的普通开发人员,以及对Redis进行选型.架构设计和性能调优的架构设计人员. 目录 概述 Redis的数据结构和相关常用命令 数据持久化 内存管理与数据淘汰机制 Pipelining 事务与Scripting Redis性能调优 主从复制与集群分片 Redis Java客户端的

Python进阶:全面解读高级特性之切片!

导读:切片系列文章连续写了三篇,本文是对它们做的汇总.为什么要把序列文章合并呢?在此说明一下,本文绝不是简单地将它们做了合并,主要是修正了一些严重的错误(如自定义序列切片的部分),还对行文结构与章节衔接做了大量改动,如此一来,本文结构的完整性与内容的质量都得到了很好的保证. 众所周知,我们可以通过索引值(或称下标)来查找序列类型(如字符串.列表.元组-)中的单个元素,那么,如果要获取一个索引区间的元素该怎么办呢? 切片(slice)就是一种截取索引片段的技术,借助切片技术,我们可以十分灵活地处理

.NET高级特性-Emit(2.2)属性

关于Emit的博客已经进入第四篇,在读本篇博文之前,我希望读者能先仔细回顾博主之前所编写的关于Emit的博文,从该篇博文开始,我们就可以真正的使用Emit,并把知识转化为实战,我也会把之前的博文链接放在下方,以方便读者阅读,大家也可以将自己的疑问或者指正写在评论当中,博主会积极进行回复. .NET高级特性-Emit(1) .NET高级特性-Emit(2)类的定义 .NET高级特性-Emit(2.1)字段 ok,今天我们继续来探索C#-Emit中关于类的知识和应用,今天我们要来探索和挖掘关于C#属

MapReduce编程实战之“高级特性”

本篇介绍MapReduce的一些高级特性,如计数器.数据集的排序和连接.计数器是一种收集作业统计信息的有效手段,排序是MapReduce的核心技术,MapReduce也能够执行大型数据集间的""连接(join)操作. 计数器 计数器是一种收集作业统计信息的有效手段,用于质量控制或应用级统计.计数器还可用于辅助诊断系统故障.对于大型分布式系统来说,获取计数器比分析日志文件容易的多. 示例一:气温缺失及不规则数据计数器 import java.io.IOException; import