可以通过 lesscss 中的另一个变量设置参数默认值吗？

Question

使用 lesscss 时是否可以通过另一个变量声明默认参数？我已经尝试过但无法让它工作。实际上可能吗？

这里的目的是将@button_bg_color设置为默认值，而不声明@button_gradient_from和@button_gradient_to。

@button_bg_color: #9cc961;
@button_txt_color: #fff;

@darkened_button_bg_color: @button_bg_color - #2b2b2b;

.branded_button(@from_color: @button_bg_color, @to_color: @darkened_button_bg_color) {
  color: @button_txt_color;
  background-color: @from_color;
  /* FireFox 3.6 */
  background-image: -moz-linear-gradient(top, @from_color, @to_color);
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, @from_color),color-stop(1, @to_color));
}

.button {
  a {
    .branded_button(@button_gradient_from, @button_gradient_to);
  }
}

++++++++++++++++++++++++++++++++++++++++++++++

编辑：更改为混合类似的帖子：are variable mixin name in LESS possible? 但这失败了具有以下渲染：

.branded_button(@from_color: @button_bg_color {
  color:#ffffff;
  background-color:;
  background-image:-moz-linear-gradient(top,,);
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,),color-stop(1,));
}

Answer 1

您可以在局部范围内重新定义全局变量。 Mixin 将使用新值进行调用。在局部范围之外，全局变量将保留其值。请参阅此 LESS 代码。

/* global variables */
@f-border-width: 4px;
@f-border-style: solid;
@f-border-color: #BE2;

/* default parameters - global variables */
.f-border (
        @width: @f-border-width, 
        @style: @f-border-style,
        @color: @f-border-color
    ) {
    border: @width @style @color;
}

/* using initial value of global variable "@f-border-color" */
.base-1 {
    .f-border;
}

/* changing global variable "@f-border-color" in the local scope */
.extension {
    @f-border-color: #F16;
    .f-border;
}

/* outside of the local scope of ".extension" */
/* global variable "@f-border-color" preserves its value */
.base-2 {
    .f-border;
}

它将被编译到此 CSS 代码中。

.base-1 {
  border: 4px solid #bbee22;
}

.extension {
  border: 4px solid #ff1166;
}

.base-2 {
  border: 4px solid #bbee22;
}

请参阅演示。