Sass : Concaténation

ExpCarthage
Les bases HTML/CSS

Bonjour à tous,
je viens vers vous car je rencontre actuellement un problème avec Sass. J'aimerai pouvoir concaténer le contenu d'une variable au nom d'une autre variable.
Afin de ne pas partir dans des discours sans fin, voici mon code :

@mixin make-buttons($color){
    &.btn-#{$color}{
        background: $background-$color; // $color serai remplacé par le texte de la couleur passé en argument
    }
}

En gros, ce que je voudrais c'est faire un appel à la mixin make-buttons en passant en argument le nom d'une couleur (ex: red, blue, green) et que cette mixin convertisse le $background-$color en $background-blue par exemple. Sachant que le &.btn-#{$color} est bien convertit en &.btn-blue.

Mais là, je sèche complètement et je ne vois pas comment faire ou même si c'est possible de le faire.

Auriez-vous une solution pour mon problème ?

Cordialement.

1 réponse

Govan06
Réponse acceptée

Tu ne peux pas avoir de variables dynamiques en SASS, il va falloir que tu uilises les lists : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#lists

exemple:

$background-colors: red, blue, yellow, green;
$i : 1;
@each $bgc in $background-colors {
    .btn-#{$bgc}{
        background: nth($background-colors, $i);  
    }
  $i: $i + 1;
}

Codepen : http://codepen.io/anon/pen/Cbnik