css - 如何避免 Sass 变量名在 _variables.scss 中重复？

Question

我有 _variables.scss，其结构如下 BEM naming conventions .

$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 Maps :

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

此外，这里有一篇关于 getting values out of deep Sass maps 的好文章.

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