Цветовые переменные SCSS, принадлежащие объекту

Question

Я реорганизую SCSS проекта, чтобы отображать цвета в их собственную переменную в файле _colors.scss.

Чаще всего, я встречаю ситуацию, когда селектор имеет background-color и color. Итак, я в конечном итоге писать следующие переменные:

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

Довольно скоро я заканчиваю со многими, многими версиями выше.

Что я хочу знать, могу ли я назначить вышеописанный объект, как в JavaScript? Например:

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

Я хотел бы, чтобы иметь возможность ссылаться на такие цвета, как $cool-table.bg.

Возможно ли это?

Answer 1

Как предложил Дэн Gamble, я бы определенно пойти на SASS карты. Напишите себе некоторые инструменты для обработки цвета. Что-то вроде:

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

Вы можете использовать карты. Хороший подправить здесь:

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

Чтобы просмотреть доступные функции, которые вы можете пойти here и прокрутите вниз, чтобы отобразить функции