属于对象的 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

您可以使用地图。一篇不错的文章在这里：

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

要查看可用函数，您可以转到 here 并向下滚动到地图函数

Answer 2

正如 Dan 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;
}

属于对象的 SCSS 颜色变量

SCSS color variables that belong to an object

variables

colors

sass

naming