映射（Maps）

使用规则集和混合器作为值的映射

通过将命名空间与查找 [] 语法相结合，你可以将规则集/混合器转换为映射。

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
};

.navbar {
  display: block;

  @media (min-width: @sizes[tablet]) {
    display: inline-block;
  }
}

输出：

.navbar {
  display: block;
}
@media (min-width: 768px) {
  .navbar {
    display: inline-block;
  }
}

由于命名空间和重载混合器的能力，混合器比规则集更具通用性。

#library() {
  .colors() {
    primary: green;
    secondary: blue;
  }
}

#library() {
  .colors() {
    primary: grey;
  }
}

.button {
  color: #library.colors[primary];
  border-color: #library.colors[secondary];
}

输出：

.button {
  color: grey;
  border-color: blue;
}

你还可以通过 Aliasing Mixins 使其更加简单。也就是说：

.button {
  @colors: #library.colors();
  color: @colors[primary];
  border-color: @colors[secondary];
}

请注意，如果查找值产生另一个规则集，则可以附加第二个 [] 查找，如下所示：

@config: {
  @options: {
    library-on: true;
  };
};

& when (@config[@options][library-on] = true) {
  .produce-ruleset {
    prop: val;
  }
}

通过这种方式，规则集和变量调用可以模拟一种类似于混合器的“命名空间”类型。

至于是使用混合器还是分配给变量的规则集作为映射，这取决于你。你可能希望通过重新声明分配给规则集的变量来替换整个映射。或者你可能希望“合并”单个键/值对，在这种情况下，混合器作为映射可能更合适。

在查找中使用变量变量

需要注意的一件重要事情是，在 [@lookup] 中的值是键（变量）名称 @lookup，而不是作为变量进行评估。如果你希望键名本身是可变的，则可以使用 @@variable 语法。

例如

.foods() {
  @dessert: ice cream;
}

@key-to-lookup: dessert;

.lunch {
  treat: .foods[ @@key-to-lookup];
}

这将输出：

.lunch {
  treat: ice cream;
}

映射（Maps）

在查找中使用变量变量​

在查找中使用变量变量