带参数的mixin

在Less中,还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin,即带参数的混入。如:

  1. // 定义一个样式选择器
  2. .borderRadius(@radius){
  3.     border-radius: @radius;
  4. }

然后,在其他选择器中像这样调用它:

  1. // 使用已定义的样式选择器
  2. #header {
  3.     .borderRadius(10px);   // 把 10px 作为参数传递给样式选择器
  4. }
  5. .btn {
  6.     .borderRadius(3px);   // 把 3px 作为参数传递给样式选择器
  7. }

编译后的CSS代码为:

  1. #header {
  2.    border-radius: 10px;
  3. }
  4. .btn {
  5.    border-radius: 3px;
  6.  }

还可以给 Mixin 的参数设置默认值,有了默认值,在调用它的时候,如果没有提供该参数,它就会使用默认值。比如,设置默认值为 5px:

  1. .borderRadius(@radius:5px){
  2.    border-radius: @radius;
  3.  }
  4. .btn {
  5.    .borderRadius;
  6.  }

由于在调用 .borderRadius 时没有传递参数,它就会使用默认值 5px。编译后的CSS代码为:

  1. .btn {
  2.    border-radius: 5px;
  3.  }

Mixin还可以带多个参数,参数之间使用逗号或分号隔开。如:

  1. .border(@width, @style, @color) {
  2.     border: @width @style @color;
  3. }
  4. h2 {
  5.     .border(2px, dashed, green);
  6. }

编译后的CSS代码为:

  1. h2 {
  2.   border: 2px dashed #008000;
  3. }

虽然多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。

使用分号作为参数分隔符,就意味着可以将逗号分隔的一组值作为一个变量处理。换句话说,如果编译器在混入的定义或者调用中找到至少一个分号,就会假设参数是使用分号分隔的,则逗号将被看作是一个参数中一组值的分隔符。如:

.name(1, 2, 3; 4, 5) 就包含2个参数,1, 2, 3是一个参数,4, 5是一个参数。每个参数都是通过逗号分隔的一组值。

.name(1, 2, 3) 就包含3个参数,每个参数只含一个数字。也可以使用一个象征性的分号,如 .name(1, 2, 3;),就可以创建一个只含一个参数,但参数包含一组值的混入。

当包含多个参数时,Mixins是通过参数的名称,而不是位置来引用参数。也就是说,在使用的时候,如果提供参数名称,则参数的顺序并不重要。命名参数使代码更清晰、更容易阅读。如:

  1. .mixin(@color: black, @fontSize: 10px) {
  2.   color: @color;
  3.   font-size: @fontSize;
  4. }
  5. .class1 {
  6.   .mixin(@fontSize: 20px, @color: #F5A9D0);
  7. }
  8. .class2 {
  9.   .mixin(#F79F81, @fontSize: 20px);
  10. }

编译后的CSS代码为:

  1. .class1 {
  2.   color: #f5a9d0;
  3.   font-size: 20px;
  4. }
  5. .class2 {
  6.   color: #f79f81;
  7.   font-size: 20px;
  8. }

除此之外,像 JavaScript 中 arguments一样,Mixin 也有这样一个变量:@arguments。当 Mixin 引用这个参数时,它表示传递进来的所有参数。

很多情况下,@arguments参数可以省去很多代码。比如,在定义 box-shadow 的属性值时,如果不想单独处理每一个参数的话,就可以像这样写:

  1. .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
  2.    box-shadow: @arguments;
  3.  }
  4.  #header {
  5.    .boxShadow(2px,2px,3px,#f36);
  6.  }

编译后的CSS代码为:

  1. #header {
  2.    box-shadow: 2px 2px 3px #f36;
  3.  }

如果需要在 mixin 中不限制参数的数量,就可以在变量名后添加“...”,表示这里可以使用可变参数。这一点跟C语言比较类似。请看以下简单实例:

对于某些属性,它的参数个数是不确定的,而具体的参数个数,只有在使用的时候才知道,这种情况就适合使用可变参数。比如,padding 属性可以接受1个、或2个、或3个、或4个参数,就可以使用可变参数。Less代码如下:

  1. .padding(...) {
  2.     padding: @arguments;
  3. }
  4. .class1 { 
  5.     .padding(20px);
  6. .class2 { 
  7.     .padding(20px 30px);
  8. .class3 { 
  9.     .padding(20px 30px 40px); 
  10. .class4 { 
  11.     .padding(20px 30px 40px 50px); 
  12. 编译后的C

SS代码为:

  1. .class1 {
  2.   padding: 20px;
  3. }
  4. .class2 {
  5.   padding: 20px 30px;
  6. }
  7. .class3 {
  8.   padding: 20px 30px 40px;
  9. }
  10. .class4 {
  11.   padding: 20px 30px 40px 50px;
  12. }

可变参数的常见形式如下:

.mixin(...) { }          // it matches arguments from 0-n

.mixin() { }           // it matches exactly 0 arguments

.mixin(@x: 1) { }      // it matches arguments from 0-1

.mixin(@x: 1, ...) { }   // it matches arguments from 0-n

 

带参数的Mixin的更多相关文章

  1. less新手入门(二) Mixin 混合、带参数的Mixin

    四.mixin  混合 "mix - in"属性来自现有的样式!! 你可以在类选择器和id选择器中使用mixin, .a,#b{ color: rebeccapurple; } . ...

  2. C#的泛型的类型参数可以有带参数的构造函数的约束方式吗?

    Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...

  3. c#线程带参数

    c#线程带参数 ThreadStart threadStart = delegate { LoadPicture(ds.Tables[0]); }; Thread thread = new Threa ...

  4. 【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案

    先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下: public static void Register(Http ...

  5. 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨

    先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...

  6. C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取

    一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号 ...

  7. Oracle游标--cursor_01-简单不带参数实现功能

    对于游标这个概念,可以理解为类似我们以前学习的jdbc的结果集对象, 我们可以使用游标对结果集从上到下进行遍历,获取每一行内容 首先我们要分析一下游标的分类 带参数的 书写函数的整体架构 定义游标 开 ...

  8. ngResource提交json数据如何带参数

    ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...

  9. ui-router带参数的ui-sref配置

    ui-router带参数的ui-sref配置 路由 .state('app.user_edit', { url:'user/userid/:userid', templateUrl: 'compone ...

随机推荐

  1. ELK系列~Nxlog日志收集加转发(解决log4日志换行导致json转换失败问题)

    本文章将会继承上一篇文章,主要讲通过工具来进行日志的收集与发送,<ELK系列~NLog.Targets.Fluentd到达如何通过tcp发到fluentd> Nxlog是一个日志收集工具, ...

  2. LeetCode 54. Spiral Matrix(螺旋矩阵)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  3. JavaScript面向对象中的继承

    1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...

  4. swift 之xib自定义view可视化到storyboard

    首先直入正题:@IBInspectable & @IBDesignable 对于 @IBInspectable 和 @IBDesignable 可详见官方文档 : Creating a Cus ...

  5. 笔记-java泛型详解

    首先,先说明一下,java泛型文章的出处:http://www.cnblogs.com/lzq198754/p/5780426.html 作为学习笔记保存. 1.为什么需要泛型 泛型在Java中有很重 ...

  6. pandas数据结构练习题(部分)

    更多函数查阅http://pandas.pydata.org/pandas-docs/stable/10min.htmlimport pandas as pd#两种数据结构from pandas im ...

  7. JSP异常之org.apache.jasper.JasperException(转)

    According to TLD or attribute directive in tag file, attribute items does not accep t any expression ...

  8. spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题

    spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...

  9. Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程

    Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程Linux版本:Ubuntu 12.04 内核版本:Linux 3.5.0 交叉编译器版本:arm-linux-gcc-4. ...

  10. selenium_Alert

    网页测试,最避免不了的就是弹出框,但是弹出框你真的分的清吗? Alert prompt comfirm 先来认识一下这三个弹窗 代码如下 <!DOCTYPE html> <html ...