Question

我正在构建一个生活风格指南，并希望自动生成colors.scss文件中的颜色信息。我的目标是尽可能简单明了地保持颜色列表。我目前的设置是：

$colors: (
//  Variable     Name          Color       Hover    Description
    white:      'White'       #ffffff     #CCCCCC   'Use this for page background and text color on dark elements',
    black:      'Black'       #000000     #333333
);

在另一个档案中：

@function color($label) {
  $color: map-get($colors,$label);

  @if $color{
    @return nth($color, 2);
  }

  @warn 'No specified color for "#{$label}"; add your own to colors.scss';
  @return null;
}

.color-values-data {
  font-family: sassToJs($colors);
}

我使用sass-to-js将数据传递给JavaScript，并计划使用该信息构建颜色图表。我可以使用我的样式表中的颜色：

.heading {
  color: color(white);
}

我有什么方法可以简化或以其他方式改善这一点吗？例如，我更喜欢使用$white而不是color(white)，但我认为在SCSS之前需要额外的编译步骤，因为它不支持动态变量名称。

此项目未使用任何现有的styleguide引擎，因为它需要为我们正在使用的CMS（Magnolia）生成UI模块，这种方法允许我们在样式指南中使用与实际站点本身完全相同的组件。

Answer 1

您可以使用SCSS变量，如此处所示http://sass-lang.com/guide#topic-2 那就是它。

从SCSS构建样式指南颜色

1 个答案: