Question

我在这段代码中有一个轻松的混音：

.generated_width (@margins:40px)
{
  -webkit-width:calc(~"100% - " @margins );
     -moz-width:calc(~"100% - " @margins );
          width:calc(~"100% - " @margins );
}

但有时我需要选择性地指定％宽度不同，例如＆＃34; 50％＆＃34;。显然，我可以用＆＃34; 50％＆＃34;来创建另一个特定但不同的混合。替换＆＃34; 100％＆＃34;，但我更喜欢将此值作为参数传递。

有没有办法编辑我的mixin，以便OPTIONALLY接受一个覆盖默认值＆＃34; 100％＆＃34;的参数。？换句话说，有时候呼叫可能是：

.generated_width (40px)

其他

.generated_width (50%,40px)

Answer 1

所以你有

.generated_width (@margins: 40px, @per: 100%)
{
  -webkit-width:calc(~"@{per} - " @margins );
     -moz-width:calc(~"@{per} - " @margins );
          width:calc(~"@{per} - " @margins );
}

调用时

.generated_width (40px)
.generated_width (40px, 40%)

我认为根据您的LESS版本，您也可以

.generated_width (@per:40%)

这样您可以根据需要指定任意数量的可选参数。这样更灵活，但需要输入更多代码。因此，如果您只有一个可选参数，那么只需将其保留在最后一个位置

LESS：Mixin带有可选参数

1 个答案: