如何避免_variables.scss中的Sass变量名重复？

Question

我有一个_variables.scss，它的结构是这样的。BEM的命名惯例.

$slot-width: 100px;
$slot-height: 10px;
$slot-title-width: 80px;
$slot-title-height: 10px;

我在重复变量名称 $slot-. 有没有一种方法可以做到像。

$slot {
  &-width: 100px;
  &-height: 10px;
  &-title {
    &-width: 80px;
    &-height: 10px;
  }
}

然后编译成上面的样子？

Answer 1

你可以使用 Sass地图:

$slot: (
  "width": 100px,
  "height": 10px,
  "title": (
    "width": 80px,
    "height": 10px
  )
);

此外，这里有一篇关于 从深层Sass地图中获取数值.

然而，继续使用带连字符的常规变量可能会更容易，因为你已经这样做了。

Answer 2

你可以使用 地图 :

$slot: (
    "width": 100px,
    "height": 10px
);

.some_bem__selector { width: map-get($slot, width); }