SCSS-Farbvariablen, die zu einem Objekt gehören

Question

Ich reformiere das SCSS eines Projekts, um Farben auf ihre eigene Variable in einer _colors.scss Datei abzubilden.

Meistens habe ich die Situation, in der ein Selektor eine background-color und color hat. Also schreibe ich am Ende die folgenden Variablen:

Ziemlich bald komme ich mit vielen, vielen Versionen der oben genannten.

Was ich wissen möchte ist, kann ich das oben genannte zu einem Objekt zuweisen, wie Sie es in JavaScript tun würden? Zum Beispiel:

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

würde Ich mag solche Farben wie $cool-table.bg beziehen können.

Ist das möglich?

Answer 1

Als Dan Gamble vorgeschlagen, ich auf jeden Fall für SASS Karten gehen würde. Schreib dir ein paar Werkzeuge für die Farbverarbeitung. Etwas wie:

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

Sie können Karten verwenden. Eine gute aufzuschreiben ist hier:

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

Um die verfügbaren Funktionen finden Sie here gehen und nach unten scrollen Funktionen zur Karte