Variables de couleur SCSS appartenant à un objet

Question

Je suis en train de refactoriser le SCSS d'un projet pour mapper des couleurs à leur propre variable dans un fichier _colors.scss.

Plus souvent qu'autrement, je rencontre la situation dans laquelle un sélecteur a un background-color et color. Donc, je finis par écrire les variables suivantes:

$cool-table-bg: $brand-primary; 
$cool-table-text: $white; 

Très bientôt je me retrouve avec beaucoup, beaucoup de versions de ce qui précède. Ce que je veux savoir est, puis-je affecter ce qui précède à un objet comme vous le feriez en JavaScript? Par exemple:

$cool-table: { 
    bg: $brand-primary; 
    text: $white; 
} 

Je voudrais pouvoir se référer à de telles couleurs $cool-table.bg.

Est-ce possible?

Answer 1

Comme Dan Gamble a suggéré, je serais certainement aller pour les cartes SASS. Ecrivez-vous quelques outils pour la gestion des couleurs. Quelque chose comme:

// define globally somewhere in your setup 
$COLORS =(); 

// use mixin to define colors groups by e.g. element name 
// example: @include color-set(cool-table, bg, #ff0000); 
// or pass in a map to define multiple colors at once 
// example: @include color-set(cool-table, (bg: #ff0000, border: #00ff00)); 
@mixin color-set($group-name, $color-name, $color-value: false) { 
    @if (type-of($color-name) == map) { 
    @each $name, $value in $color-name { 
     @include define-color($group-name, $name, $value); 
    } 
    } 
    @else { 
    @if(map-has-key($COLORS, $group-name)) { 
     $group: map-get($COLORS, $group-name); 
    } 
    @else { 
     $group:(); 
    } 
    $group: map-merge($group, ($color-name: $color-value)); 
    $COLORS: map-merge($COLORS, ($group-name: $group)) !global; 
    } 
} 

// access color values anywhere with this function by passing in 
// element name and color identifier 
// example: $bg-color: color-get(cool-table, bg); 
@function color-get($group-name, $color-name) { 
    @if (map-has-key($COLORS, $group-name)) { 
    $group: map-get($COLORS, $group-name); 
    @if (map-has-key($group, $color-name)) { 
     @return map-get($group, $color-name); 
    } 
    } 
    @return false; 
} 

Answer 2

Vous pouvez utiliser des cartes. Une bonne écriture est en place ici:

https://www.sitepoint.com/using-sass-maps/

Pour voir les fonctions disponibles, vous pouvez aller here et faites défiler vers le bas pour la carte fonctions