属于某个对象的 SCSS 颜色变量

Question

我正在重构项目的 SCSS，以将颜色映射到_colors.scss文件中它们自己的变量。

我经常遇到选择器带有 and 的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

正如 Dan Gamble 所建议的，我\xe2\x80\x99d 肯定会选择 SASS 地图。为自己编写一些颜色处理工具。就像是：

\n\n

// define globally somewhere in your setup\n$COLORS = ();\n\n// use mixin to define colors groups by e.g. element name\n// example: @include color-set(cool-table, bg, #ff0000);\n// or pass in a map to define multiple colors at once\n// example: @include color-set(cool-table, ( bg: #ff0000, border: #00ff00));\n@mixin color-set($group-name, $color-name, $color-value: false) {\n  @if (type-of($color-name) == map) {\n    @each $name, $value in $color-name {\n      @include define-color($group-name, $name, $value);\n    }\n  }\n  @else {\n    @if(map-has-key($COLORS, $group-name)) {\n      $group: map-get($COLORS, $group-name);\n    }\n    @else {\n      $group: ();\n    }\n    $group: map-merge($group, ( $color-name: $color-value ));\n    $COLORS: map-merge($COLORS, ( $group-name: $group )) !global;\n  }\n}\n\n// access color values anywhere with this function by passing in \n// element name and color identifier\n// example: $bg-color: color-get(cool-table, bg);\n@function color-get($group-name, $color-name) {\n  @if (map-has-key($COLORS, $group-name)) { \n    $group: map-get($COLORS, $group-name);\n    @if (map-has-key($group, $color-name)) {\n      @return map-get($group, $color-name);\n    }\n  }\n  @return false;\n}\n

\n