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

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

说起高级特性,首先也必须要一提的是模式匹配。

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

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

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

OK了,还是上主菜吧,下面列出了几项 LESS 的高级特性。

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

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

  1. /* LESS CODE */
  2. .test(@size){
  3. width: @size;
  4. }
  5. .test(@size, @multiple){
  6. width: @size * @multiple;
  7. }
  8.  
  9. .el-a{
  10. .test(10px);
  11. }
  12. .el-b{
  13. .test(10px, 2);
  14. }
  1. /* CSS CODE */
  2. .el-a {
  3. width: 10px;
  4. }
  5. .el-b {
  6. width: 20px;
  7. }

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

  1. /* LESS CODE */
  2. .test(large, @size: 10px){
  3. width: @size * 2;
  4. }
  5. .test(simple, @size: 10px){
  6. width: @size;
  7. }
  8. .test(@_ @size: 10px){
  9. display: block;
  10. }
  11.  
  12. .el-a{
  13. .test(large);
  14. }
  15. .el-b{
  16. .test(simple);
  17. }
  1. /* CSS CODE */
  2. .el-a {
  3. width: 20px;
  4. display: block;
  5. }
  6. .el-b {
  7. width: 10px;
  8. display: block;
  9. }

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

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

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

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

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

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

3.用条件表达式来控制模式匹配

  1. /* LESS CODE */
  2. .test(@size) when (@size >= 10){
  3. width: @size;
  4. color: #f00;
  5. }
  6. .test(@size) when (@size < 10){
  7. width: @size;
  8. color: #000;
  9. }
  10.  
  11. .el-a{
  12. .test(20px);
  13. }
  14. .el-b{
  15. .test(5px);
  16. }
  1. /* CSS CODE */
  2. .el-a {
  3. width: 20px;
  4. color: #f00;
  5. }
  6. .el-b {
  7. width: 5px;
  8. color: #000;
  9. }

有了条件表达式,总算可以跟 SASS 的 @if 比拼一下了,虽然实际用起来感觉还是不如 @if,但总比被完爆要强不少了。

4.条件表达式中使用类型检测函数

  1. /* LESS CODE */
  2. .test(@param) when (iscolor(@param)){
  3. color: @param;
  4. }
  5. .test(@param) when (isnumber(@param)){
  6. width: @param;
  7. }
  8.  
  9. .el-a{
  10. .test(#f00);
  11. }
  12. .el-b{
  13. .test(5px);
  14. }
  1. /* CSS CODE */
  2. .el-a {
  3. color: #ff0000;
  4. }
  5. .el-b {
  6. width: 5px;
  7. }

当然,上面的例子仅仅是列出了两个类型检测函数,LESS 提供了很多类型检测函数,如:iscolor、isnumber、isstring、iskeyword、isurl等等,具体的话,我会在下一篇 LESS 函数说明中提及。

5.条件表达式中使用 and、or、not

  1. /* LESS CODE */
  2. .test(@size) when (@size > 10) and (@size < 20){
  3. width: @size;
  4. color: #000;
  5. }
  6. .test(@size) when (@size < 10), (@size > 20){
  7. width: @size;
  8. color: #ff0;
  9. }
  10. .test(@size) when not (@size = 20){
  11. text-align: center;
  12. }
  13.  
  14. .el-a{
  15. .test(15px);
  16. }
  17. .el-b{
  18. .test(5px);
  19. }
  20. .el-c{
  21. .test(10px);
  22. }
  1. /* CSS CODE */
  2. .el-a {
  3. width: 15px;
  4. color: #000;
  5. text-align: center;
  6. }
  7. .el-b {
  8. width: 5px;
  9. color: #ff0;
  10. text-align: center;
  11. }
  12. .el-c {
  13. text-align: center;
  14. }

细心的同学会发现,LESS 中的逻辑与,是用英文逗号“,”来实现的,而不是直接用 or。

6.条件表达式中参数和参数进行比较

  1. /* LESS CODE */
  2. .test(@width, @height) when (@width >= @height){
  3. width: @width;
  4. height: @height;
  5. background-color: #000;
  6. }
  7. .test(@width, @height) when (@width < @height){
  8. width: @width;
  9. height: @height;
  10. background-color: #f00;
  11. }
  12.  
  13. .el-a{
  14. .test(10px, 20px);
  15. }
  16. .el-b{
  17. .test(20px, 10px);
  18. }
  1. /* CSS CODE */
  2. .el-a {
  3. width: 10px;
  4. height: 20px;
  5. background-color: #f00;
  6. }
  7. .el-b {
  8. width: 20px;
  9. height: 10px;
  10. background-color: #000;
  11. }

7.高级参数用法

  1. /* LESS CODE */
  2.  
  3. /* 不接受任何参数 */
  4. .test(){
  5. ...
  6. }
  7. /* 接受任意多个参数 */
  8. .test(...){
  9. ...
  10. }
  11. /* 接受1个参数 */
  12. .test(@size: 1px){
  13. ...
  14. }
  15. /* 接受0~1个参数 */
  16. .test(@size){
  17. ...
  18. }
  19. /* 同样是接受任意多个参数 */
  20. .test(@size: 1px, ...){
  21. ...
  22. }
  23. /* 接受1~N个参数 */
  24. .test(@size, ...){
  25. ...
  26. }

主要是说明“...”的用法,另外还有先前(在基本语法一文中)提到的 @arguments 变量,如果已经淡忘,那可以去回顾下了。

8.作用域

  1. /* LESS CODE */
  2.  
  3. .test(@bgColor, @size){
  4. .set-bg-color(){
  5. background: @bgColor;
  6. }
  7. .set-size(){
  8. width: @size;
  9. height: @size;
  10. }
  11.  
  12. .set-bg-color();
  13. .set-size();
  14. }
  15.  
  16. .el-a{
  17. .test(#fff, 20px);
  18. }
  1. /* CSS CODE */
  2. .el-a {
  3. background: #ffffff;
  4. width: 20px;
  5. height: 20px;
  6. }

可以看到,在 .test 中,我还定义了两个 Mixins (就是 .set-bg-color 和 .set-size),但是这两个 Mixins 的作用域仅仅是在 .test 之中,如果在外部调用是会编译报错的。

而 .set-bg-color 和 .set-size 作为 .test 的内部 Mixins,它们本身虽然没参数,却又可以直接使用 .test 的参数。

是不是和 JS 很像?如果你对 JS 的作用域有所了解,那么这些应该不难理解。

9.字符串插值

  1. /* LESS CODE */
  2. .test(@domain){
  3. background-image: url("@{domain}/img/test.png");
  4. }
  5.  
  6. .el-a{
  7. .test('http://asset.img.com');
  8. }
  1. /* CSS CODE */
  2. .el-a {
  3. background-image: url("http://asset.img.com/img/test.png");
  4. }

这一个特性在统一配置静态资源所在域中会有很好的发挥

10.避免编译

  1. /* LESS CODE */
  2. .test(){
  3. filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
  4. }
  5.  
  6. .el-a{
  7. .test();
  8. }
  1. /* CSS CODE */
  2. .el-a {
  3. filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
  4. }

对于像滤镜这种特别的 CSS (特别之处在于这样的 CSS 本身就是一种函数调用,而 LESS 又没有提供这样的函数),LESS 通过 ~"内容" 这样格式来直接输出内容,避免对内容部分进行编译。

11.在 LESS 中使用 Javascript

  1. /* LESS CODE */
  2. .el-a{
  3. font-size: 12px;
  4. color: #f00;
  5. &:before{
  6. @arr: 'hello', 'world';
  7. content: `@{arr}.join(' ').toUpperCase()`;
  8. }
  9. }
  1. /* CSS CODE */
  2. .el-a {
  3. font-size: 12px;
  4. color: #f00;
  5. }
  6. .el-a:before {
  7. content: "HELLO WORLD";
  8. }

上面的例子中,可以捕抓到几个点:

如何用 LESS 变量来定义数组,@arr: 'hello', 'world';

如何在 LESS 中使用 JS(用“``”来包住要执行的JS语句),and 当中的 JS 如何获取 LESS 中定义的变量(用“@{变量名}”的格式),content: `@{arr}.join(' ').toUpperCase()`;

由于一般情况下,我们都是用 LESS 编译出 CSS 后,直接引用 CSS 文件的。所以在 LESS 中一般都不会使用和 DOM 相关的 JS 代码;

虽然说,能在 LESS 中使用 JS 是一件很让人兴奋的事,但实际上...除了极少时候需要做字符串处理外,真的想不到有什么时候需要用到这一特性...

【LESS系列】高级特性的更多相关文章

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

    一.Master选举 1. master选举原理: 有多个master,每次只能有一个master负责主要的工作,其他的master作为备份,同时对负责工作的master进行监听,一旦负责工作的mas ...

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

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  3. Python的高级特性8:你真的了解类,对象,实例,方法吗

    Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...

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

    导读:切片系列文章连续写了三篇,本文是对它们做的汇总.为什么要把序列文章合并呢?在此说明一下,本文绝不是简单地将它们做了合并,主要是修正了一些严重的错误(如自定义序列切片的部分),还对行文结构与章节衔 ...

  5. Redis基础用法、高级特性与性能调优以及缓存穿透等分析

     一.Redis介绍 Redis是一个开源的,基于内存的结构化数据存储媒介,可以作为数据库.缓存服务或消息服务使用.Redis支持多种数据结构,包括字符串.哈希表.链表.集合.有序集合.位图.Hype ...

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

    本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...

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

    本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...

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

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  9. 《Java核心技术 卷II 高级特性(原书第9版)》

    <Java核心技术 卷II 高级特性(原书第9版)> 基本信息 原书名:Core Java Volume II—Advanced Features(Ninth Edition) 作者: ( ...

随机推荐

  1. Geronimo 叛逆者: 使用集成软件包:Codehaus 的 Woodstox(转载)

    XML 解析器通常是高性能.健壮应用程序的关键.传统的 XML 解析技术包括文档对象模型(Document Object Model,DOM)和 Simple API for XML (SAX).现在 ...

  2. 【树状DP】星象仪

    题目描述 在寂寞的夜里,星象仪是非常浪漫的东西.但是,你作为一个精神稍微有点不太正常的Geek,把原本正常的星象仪改造得像电报发送器一样.当然,你这个的构造还要更加奇葩一点.具体来说,你的星象仪是一棵 ...

  3. Python入门基础学习 一

    Python入门基础学习 一 Python下载及安装 下载地址:https://www.python.org/,选择最新的版本下载 稍等一会,安装完成. 简单语句 从idle启动Python:IDLE ...

  4. .NET框架源码解读之启动CLR

    前面提到在SSCLI环境里运行.NET程序的时候,执行的命令类似java程序的执行过程,即通过clix程序解释执行.net程序.这个过程看起来跟在windows环境下执行.net程序表面上看起来不一样 ...

  5. Centos 7 安装记录

    0.安装中选择最小安装 1.centos7安装图形界面 之前转载过一篇“centos6安装图形界面”的文章,地址见http://my.oschina.net/u/1169607/blog/335304 ...

  6. Python 实现图片对比检测

    在写测试框架的时候,需要用到图片对比的方法来判断用例执行的情况,问了一下度娘,原来可以用PIL模块处理: from PIL import Image  # 先安装Pillow, \>pip in ...

  7. C#学习(1):类型约束

    where T : class泛型类型约束 类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class T必须是一 ...

  8. .net图表之ECharts随笔08-bar柱状图

    之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...

  9. 【Oracle 12c】最新CUUG OCP-071考试题库(55题)

    55.(13-3) choose the best answer: Which statement is true regarding the SESSION_PRIVS dictionary vie ...

  10. 动态代理(JDK实现)

    JDK动态代理,针对目标对象的接口进行代理 ,动态生成接口的实现类 !(必须有接口) public class ProxyDemo { //通过方法的返回值得到代理对象            方法参数 ...