更少：以类似于“嵌套规则”的方式创建变量

Question

实际上，我通过以下方式定义了几个LESS变量：

@toolbar-first-level-item-color-background:             @transparent-black-80;
@toolbar-first-level-item-color-background_hover:       @black;
@toolbar-second-level-item-color-background:            lighten(@toolbar-entry-color-background,30%);
@toolbar-second-level-item-color-background_hover:      lighten(@toolbar-entry-color-background_hover,30%);
@toolbar-third-level-item-color-background:             lighten(@toolbar-entry-color-background,40%);
@toolbar-third-level-item-color-background_hover:       lighten(@toolbar-entry-color-background_hover,40%);
@toolbar-fourth-level-item-color-background:            lighten(@toolbar-entry-color-background,45%);
@toolbar-fourth-level-item-color-background_hover:      lighten(@toolbar-entry-color-background_hover,45%);

如您所见，其中有多个重复项，所以我想知道是否可以使用名称空间或映射之类的内容来创建更紧凑，更不重复的声明。

这个想法是从嵌套规则的结构开始的，该规则创建了一个非常清晰的层次结构，几乎没有重复。

Answer 1

我认为，您可以使用map。这是Less lang中的一项新功能，可让您使用键获取值。

您可以这样写：

@toolbar: {
  @first-level-item: {
    color-background: #fff;
  };
}

text {
  color: @toolbar[@first-level-item][color-background];
}