带参数的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. } 
  7. .class2 { 
  8.     .padding(20px 30px);
  9. } 
  10. .class3 { 
  11.     .padding(20px 30px 40px); 
  12. } 
  13. .class4 { 
  14.     .padding(20px 30px 40px 50px); 
  15. } 
  16. 编译后的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

 

最新文章

  1. 杭电ACM1000
  2. 方法的覆盖(override)、重载(overload)和重写(overwrite)
  3. ubuntu 调整桌面图标大小
  4. win32控制台消息机制
  5. PHP框架Yii2.0安装（基础版、高级版）
  6. Linux_常用命令_02
  7. Ubuntu 14.04快速搭建SVN服务器及日常使用【转】
  8. zabbix统一脚本监控方式
  9. 洛谷 P1093 奖学金
  10. Linux 挂载NTFS文件系统
  11. Android中倒计时代码
  12. 定制Attribute
  13. JUnit——（二）注解
  14. 修改index.php 清空mylog1.txt
  15. Milk Pails
  16. 一个web应用的诞生(10)--关注好友
  17. 神奇的Scala Macro之旅（三）- 实际应用
  18. js操作DOM对象
  19. Docker下安装GitLab
  20. selenium如何操作HTML5的画布canvas上的元素

热门文章

  1. Android基础知识03—Activity的基本用法
  2. 3des用法示例，已测试
  3. Golang开发者常见的坑
  4. DNS over TLS到底有多牛？你想知道的都在这儿
  5. java加密解密
  6. java基础解析系列(十)---ArrayList和LinkedList源码及使用分析
  7. Bower+grunt-wiredep自动注入包到html
  8. BZOJ-2463
  9. 蓝桥杯-算法训练--ALGO-8 操作格子
  10. Robotframework自动化系统：筛选结果数量统计