CODEWITHSUNDEEP
variablessassmixinsdollar-sign
arnaudambro
arnaudambro

Reputation: 2653

use prefix in sass mixins : how to concatenate with a dollar to create variable?

I have some divs in my HTML which are a bit like that :

<div class="items">
  <div class="item1-image-container"></div>
  <div class="item2-image-container"></div>
  <div class="item3-image-container"></div>
  <div class="item4-image-container"></div>
  <div class="item5-image-container"></div>
</div>

And each of them has a sass variable for their color, which is :

$item1-color;
$item2-color;
$item3-color;
$item4-color;
$item5-color;

Therefore I want to create a mixin which would add the color to the background of each div. I wrote something like that, which is not working and I don't know how to solve my issue, if I can ever solve it...

@mixin background-color-menu-item($prefix: '') {
    .#{$prefix}-picture-container {
        background-color: $#{$prefix}-color;
    }
}

The sass precompiler tells me that the first dollar in $#{$prefix} is a problem.

Upvotes: 1

Views: 1101

Answers (1)

Ari
Ari

Reputation: 1703

DEMO

So you can do what you're trying to do, but you won't get the result you want.

@mixin background-color-menu-item($prefix: '') {
    .#{$prefix}-picture-container {
        background-color: unquote("$#{$prefix}-color");
    }
}

.stuff {
  @include background-color-menu-item($item5-color);
}

The unquote function will allow you to prepend the $, but it won't get the value of the variable, just the name of the variable...

.stuff .yellow-picture-container {
  background-color: $yellow-color;
}

But you can use a map and iteration to accomplish your goal, if your goal is only to set these values 1 time.

$item1-color: blue;
$item2-color: red;
$item3-color: green;
$item4-color: brown;
$item5-color: yellow;

$items: (
  item1: $item1-color,
  item2: $item2-color,
  item3: $item3-color,
  item4: $item4-color,
  item5: $item5-color
);

@each $key, $val in $items {
  .#{$key}-picture-container {
    background-color: #{$val};
  }
};

Upvotes: 2

Related Questions