减少混合和变量

mar*_*605 2 less less-mixins

我有以下mixin:

.iconFont(@color: @green, @font-size: 18px){
  color: @color;
  font-size: @font-size;
}
Run Code Online (Sandbox Code Playgroud)

如果我只想更改第二个变量值,我需要写第一个变量默认值吗?

h1{
 .iconFont(@green, 14px);
}
Run Code Online (Sandbox Code Playgroud)

Har*_*rry 5

不,在调用函数时无需为第一个参数指定默认值.相反,您可以使用命名参数功能明确地让编译器知道您在mixin调用中传递的值是第二个参数.

.sample{
    .iconFont(@font-size:14px);
}
Run Code Online (Sandbox Code Playgroud)

编译时的上述Less代码将产生以下输出.(注意:我设置@green#00ff00.)

.sample {
    color: #00ff00;
    font-size: 14px;
}
Run Code Online (Sandbox Code Playgroud)

使用命名参数功能时,即使传递参数的顺序也无关紧要.例如,可以如下调用相同的mixin:

.sample2{
    .iconFont(@font-size:24px, @color: #070707);
}
Run Code Online (Sandbox Code Playgroud)

并且它将产生以下作为输出.

.sample2 {
    color: #070707;
    font-size: 24px;
}
Run Code Online (Sandbox Code Playgroud)