Référencement d'une variable sass/scss à la volée

Question

J'essaie de faire un mixin pour obtenir ce qui suit. Je possède une liste de boutons sociaux. Ils partagent chacun les mêmes styles sauf la couleur de fond et les états de survol.

Mon approche SASS actuelle. (Renverra l'erreur CSS valide)

@mixin btn-social($network) { 
    .#{$network} { 
     background: $#{$network}; // trying to reference a global variable 

      &:hover, &:focus { 
       background: darken($#{$network}, $darken-modifier); 
      } 
    } 
} 

Pour render comme ceci:

.facebook { 
    background: blue; // stored in $facebook 
} 
.facebook:hover, .facebook:focus { 
    background: darkblue; //darkend value above 
} 

je manque en quelque sorte les bons termes pour une recherche google appropriée. J'apprécierais une poussée dans la bonne direction.

Merci pour l'aide.

Answer 1

Vous pouvez utiliser une carte SASS pour stocker les variables de couleur, puis trouver la bonne couleur en utilisant le nom que vous passez dans votre mixin comme si jsfiddle:

$colors: (
 
    facebook: blue, 
 
    twitter: red 
 
); 
 
$darken-modifier: 100%; 
 

 

 

 
@mixin btn-social($network) { 
 
    .#{$network} { 
 
    background: map-get($colors, $network); 
 
    &:hover, &:focus { 
 
     background: darken(map-get($colors, $network), $darken-modifier); 
 
    } 
 
    } 
 
} 
 

 
@include btn-social(facebook); 
 
@include btn-social(twitter);

<a class="facebook"> 
 
    facebook 
 
</a> 
 

 
<a class="twitter"> 
 
    twitter 
 
</a>

Edit: mis à jour inclure la suggestion @ TomOakley ci-dessous.

Answer 2

S'il vous plaît essayez ce qui suit:

@mixin btn-social($network, $color, $darkColor) { 
    #{$network} { 
     background: $color; 

      &:hover, &:focus { 
       background: $darkColor; 
      } 
    } 
} 

.foo { 
    @include btn-social('.facebook', blue, darkblue) 
} 

Cette compile à:

.foo .facebook { 
    background: blue; 
} 
.foo .facebook:hover, .foo .facebook:focus { 
    background: darkblue; 
} 

Découvrez this reference pour l'interpolation SASS.