2 Less Parameter 一个默认为null

Question

嘿，我有两套图标样式。黑白

 settings-icon-white.png  or  settings-icon.png

现在我正在使用带有文本参数的 Less mixin：

 //The mixin
.icon-finder(@url){ 
  background-image: url("../images/icons/backend/@{url}-icon.png");
  background-size: cover;
}

//generated class:login-icon.png
.icon-login{
  .icon-finder(login);
}

现在的挑战是，如果参数通过 white，我还想选择 select 一个白色图标。有没有办法有一个默认的 null 参数，但如果需要可以使用？

例如：

.icon-finder(@url,@white){
   background-image: url("../images/icons/backend/@{url}-icon@{white}.png");
   background-position: center center;
}

但是我不想一直都是白色的，所以这个可以为null吗？ @white = "" 我确实看到这个 @_ 是 used before - 对吗？

所以代码是这样的：

.icon-admin{
   .icon-finder(admin);
}
.icon-admin-white{
   .icon-finder(admin,white);
}

我错过了什么吗？提前致谢！

Answer 1

是的，您可以通过在 mixin 声明中指定它来为 mixin 参数设置默认值，如下面的代码块所示。 @white: '' 部分表示当调用中未提供任何值时，mixin 会将 @white 的值作为空字符串。

.icon-finder(@url,@white: ''){
   background-image: url("../images/icons/backend/@{url}-icon@{white}.png");
   background-position: center center;
}
.icon-admin{
   .icon-finder(admin);
}
.icon-admin-white{
   .icon-finder(admin,white);
}

无需使用 link 中提到的 @_ 语法。

请注意，如果您正在编写类似 mixin 库的东西，并且想将第二个参数的值限制为白色或什么都没有（上面的 mixin 允许您为第二个参数发送任何值），那么您可以使用一个还有以下选项：

选项 1： 两个单独的混合，一个具有硬编码的 white 值（注意它不是变量），另一个只有一个参数。这样，如果用户试图传递任何其他值，它将被拒绝。

.icon-finder(@url,white) {
   background-image: url("../images/icons/backend/@{url}-iconwhite.png");
   background-position: center center;
}
.icon-finder(@url){
   background-image: url("../images/icons/backend/@{url}-icon.png");
   background-position: center center;
}
.icon-admin{
   .icon-finder(admin);
}
.icon-admin-white{
   .icon-finder(admin,white);
}

选项 2： 使用守卫并检查值是否为白色。如果是则使用白色背景图像，否则使用默认值。

.icon-finder(@url,@white: '') {
  & when (@white = white){
   background-image: url("../images/icons/backend/@{url}-iconwhite.png");
   background-position: center center;
  }
  & when not (@white = white){
   background-image: url("../images/icons/backend/@{url}-icon.png");
   background-position: center center;
  }
}
.icon-admin{
   .icon-finder(admin);
}
.icon-admin-white{
   .icon-finder(admin,white);
}

第一个选项的优点是，如果给出除白色以外的任何值，编译器将抛出错误并警告用户提供了错误的值，而第二个选项将默默地切换到默认值。

2 Less Parameter 一个默认为null

2 Less Parameter with one being null by default

png

less