How to avoid Sass variable name repeat in _variables.scss?

Question

I have _variables.scss which is structured like this following BEM naming conventions.

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

I'm repeating variable names $slot-. Is there a way to do something like:

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

And it compiles to the above?

Answer 1

You could use Sass Maps:

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

Additionally, here's a good article on getting values out of deep Sass maps.

However, it may be easier to continue using regular variables with hyphens, as you already have.

Answer 2

You could use a map :

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

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