Utiliser l'argument mixin comme variable

Question

J'ai donc différentes variables et je veux générer du css en fonction de l'argument ( qui est aussi une variable ) que je donne.

Je veux utiliser l'argument donné comme un nom de variable. Par exemple, si on me donne primary comme argument, je veux en fait obtenir la valeur de la variable $primary-brighter.

Par exemple :

$primary: #f5f5f5;
$primary-brighter: #fff;

$secondary: #000;
$secondary-brighter: #333;

Mixin :

@mixin button-style($argument) {

 background: $argument
 color: $argument-brighter
}

En cours d'utilisation :

.button-primary {
 @include button-style(primary)
}

Ce que j'espère obtenir :

.button-primary {
 background: #f5f5f5;
 color: #fff
}

Ce que je reçois :

Error or
.button-primary {
 background: primary-brighter
}

Dois-je échapper l'argument pour l'utiliser comme une variable ? ? Ou bien mon approche est-elle complètement erronée ?

Answer 1

Je ne sais pas s'il existe un moyen plus propre, mais vous pourriez obtenir quelque chose comme ça avec maps . Une solution serait de définir vos classes de boutons comme des clés d'une carte qui contient une autre carte des couleurs réelles à utiliser :

$button-colors: (

  "primary": (
    background: #f5f5f5,
    color: #fff
  ),

  "secondary": (
    background: #000,
    color: #333
  )

);

Puis, dans votre mixin, votre $argument serait une valeur textuelle au lieu d'une valeur hexagonale et vous pourriez accéder à la carte des couleurs du bouton :

@mixin button-style($argument) {

  $color-map: map-get($button-colors, $argument);

  background: map-get($color-map, background);
  color: map-get($color-map, color);

}

Le mixin serait alors consommé comme ceci :

.button-primary {
 @include button-style(primary)
}

.button-secondary {
 @include button-style(secondary)
}