Less简明教程
2.2.2 带参数的mixin
阅读(

Less 基础

Less 特性

变量

Mixin

什么是Mixin

带参数的mixin

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

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

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

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

编译后的CSS代码为:

#header {
   border-radius: 10px;
}
.btn {
   border-radius: 3px;
 }

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

.borderRadius(@radius:5px){
   border-radius: @radius;
 }
.btn {
   .borderRadius;
 }

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

.btn {
   border-radius: 5px;
 }

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

.border(@width, @style, @color) {
    border: @width @style @color;
}
h2 {
    .border(2px, dashed, green);
}

编译后的CSS代码为:

h2 {
  border: 2px dashed #008000;
}

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

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

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

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

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

.mixin(@color: black, @fontSize: 10px) {
  color: @color;
  font-size: @fontSize;
}
.class1 {
  .mixin(@fontSize: 20px, @color: #F5A9D0);
}
.class2 {
  .mixin(#F79F81, @fontSize: 20px);
}

编译后的CSS代码为:

.class1 {
  color: #f5a9d0;
  font-size: 20px;
}
.class2 {
  color: #f79f81;
  font-size: 20px;
}

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

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

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

编译后的CSS代码为:

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

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

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

.padding(...) {
    padding: @arguments;
}
.class1 { 
    .padding(20px);
} 
.class2 { 
    .padding(20px 30px);
} 
.class3 { 
    .padding(20px 30px 40px); 
} 
.class4 { 
    .padding(20px 30px 40px 50px); 
} 
编译后的C

SS代码为:

.class1 {
  padding: 20px;
}
.class2 {
  padding: 20px 30px;
}
.class3 {
  padding: 20px 30px 40px;
}
.class4 {
  padding: 20px 30px 40px 50px;
}

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

.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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验