CODEWITHSUNDEEP
cssvariablessass
one-hand-octopus
one-hand-octopus

Reputation: 2763

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

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?

Upvotes: 3

Views: 160

Answers (2)

net.uk.sweet
net.uk.sweet

Reputation: 12431

You could use a map :

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

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

Upvotes: 1

Sean
Sean

Reputation: 8064

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.

Upvotes: 3

Related Questions