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

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 lightthen 来实现此目的，但不能使用内联样式来做到这一点。

我调查了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;
      }
    }
  }
}