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

【问题标题】：render components with user selected colors使用用户选择的颜色渲染组件
【发布时间】：2016-12-30 23:06:28
【问题描述】：

我有一个表单，我向用户询问特定项目的颜色，它在我的模型中存储为代表十六进制值的字符串（例如：#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，因为那样会非常慢。

我会在很多组件中使用这种颜色，有什么灵活的方法可以实现这一点？

【问题讨论】：

标签： javascript ruby-on-rails sass

【解决方案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;
      }
    }
  }
}

【讨论】：