Question

我有一个表单，我向用户询问特定项目的颜色，它在我的模型中存储为表示十六进制值的字符串（例如：#FFF）。

我想要的是能够使用这种颜色渲染页面组件，并避免使用这样的内联样式：

<h2 style="color: <%= project.color %>;"><%= project.client.upcase %></h2>

由于颜色是预定义的（可能有10种预定义颜色的列表），我以为我可以存储class名称。但是，这样做我必须在多个地方维护颜色列表：

我必须验证用户指定的颜色类是否在列表中，所以我需要后端代码中的列表
我需要我的SASS中定义的颜色列表
可能还需要我的javascript中的颜色选择颜色列表

存储十六进制值时的另一个问题是当我想使用不同颜色的阴影时：

<div class="progress" style="background-color: <%= project.color %>">
  <div class="progress-bar" style="width: 40%; background-color: <%= project.color %>;">
  </div>
</div>

在这种情况下，我希望第一个div有一个较浅版本的颜色，我会使用sass ligthen，但不能使用内联样式。

我调查了this question，但我不想按照请求重新编译我的sass，因为这会很慢。

我会在很多组件中使用这种颜色，这是一种实现这一目标的灵活方式吗？

Answer 1

所以，我选择在数据库中存储类名，在我的标记中它看起来像这样：

<div class="project project-color-<%= project.color %>">
  <div class="element">a div</div>
  <div class="another">another div</div>
</div>

然后在我的sass中，我正在存储颜色地图：

$project-colors: (
  pomegranate:          $pomegranate,
  razzmatazz:           $razzmatazz,
  purple-heart:         $purple-heart,
  cool-blue:            $cool-blue,
  deep-sky-blue:        $deep-sky-blue,
  iris-blue:            $iris-blue,
  gossamer:             $gossamer
);

然后我动态创建这些类：

.project {
  @each $name, $color in $project-colors {
    &.project-card-#{$name} {
      .element {
        background-color: $color;
      }

      .another {
        color: $color;
      }
    }
  }
}

使用用户选择的颜色渲染组件

1 个答案: