更少的 mixin 和变量

【问题标题】：Less mixin and variables更少的 mixin 和变量
【发布时间】：2014-09-11 12:49:09
【问题描述】：

我有以下混合：

.iconFont(@color: @green, @font-size: 18px){
  color: @color;
  font-size: @font-size;
}

如果我只想改变第二个变量的值，我需要写第一个变量的默认值吗？

h1{
 .iconFont(@green, 14px);
}

【问题讨论】：

@Harry，绿色是另一个变量（绿色：#f3b600）。我的问题是：当 h1 使用绿色（在 mixin 中设置为默认值）时，如果我只设置 font-size 值，则该值变为颜色。
有你的伙伴。如果您使用 Less 提供的命名参数功能，则不需要。使用方法请参考我的回答。

【解决方案1】：

不，调用函数时不需要指定第一个参数的默认值。相反，您可以使用named parameters 功能明确地让编译器知道您在 mixin 调用中传递的值是用于第二个参数的。

.sample{
    .iconFont(@font-size:14px);
}

上面的 Less 代码在编译时会产生下面的输出。（注意：我已将@green 设置为#00ff00。）

.sample {
    color: #00ff00;
    font-size: 14px;
}

在使用命名参数功能时，即使参数传递的顺序也无关紧要。例如，同一个mixin可以这样调用：

.sample2{
    .iconFont(@font-size:24px, @color: #070707);
}

它会产生以下输出。

.sample2 {
    color: #070707;
    font-size: 24px;
}

【讨论】：