préfixe d'utilisation dans Sass Mixins: comment concaténer avec un dollar pour créer une variable?

Question

j'ai quelques divs dans mon code HTML qui sont un peu comme ça:

<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> 

Et chacun d'eux a une variable SASS pour leur couleur, ce qui est:

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

donc je veux créer un mixin qui ajouterait la couleur à l'arrière-plan de chaque div. J'ai écrit quelque chose comme ça, qui ne fonctionne pas et je ne sais pas comment résoudre mon problème, si je peux jamais le résoudre ...

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

Le précompilateur SASS me dit que le premier dollar en $#{$prefix} est un problème.

Answer 1

DEMO

vous pouvez donc faire ce que vous essayez de faire, mais vous ne serez pas le résultat que vous voulez.

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

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

La fonction unquote vous permettra de préfixer le $, mais il ne sera pas la valeur de la variable, juste le nom de la variable ...

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

Mais vous pouvez utiliser map et l'itération pour atteindre votre objectif, si votre objectif est seulement de définir ces valeurs 1 fois.

$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}; 
    } 
};