ユーザーが選択した色のコンポーネントをレンダリングします

Question

私は特定のプロジェクトの色をユーザーに求めるフォームを持っています。モデルに16進数の値を表す文字列として格納されています（例：#FFF）。

私が好きなことは、この色を使用したページのコンポーネントをレンダリングすると、次のようにインラインスタイルの使用を避けることができるようにすることです：

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

色が事前に定義されるように（事前に定義された10のリストがあるかもしれません色）私は代わりにclass名前を格納できると思っていた。しかし、これをやって、私は複数の場所で色のリストを維持しなければならない：

• は、私は、ユーザーが指定した色のクラスがリストにあることを検証しなければならないので、私は、リストを必要とするだろう私のバックエンドのコード
• に私は私のSASSで定義された色のリストが必要になります
• 、おそらくまた、カラーピッカー

進を格納するときに私が持っているもう一つの問題のために私のjavascriptの色のリストが必要になります値は、色の異なる色合いを使用したいときです：

この場合、私は最初のdivに色の明るいバージョンを持たせたいと思いますが、これにはsass ligthenを使用しますが、インラインスタイルを使用することはできません。

私はthis questionに目を通しましたが、非常に遅いのでリクエストごとに私の鳴き声を再コンパイルしたくありません。

私は多くのコンポーネントでこの色を使用していますが、これを実現する柔軟な方法は何ですか？

Answer 1

だから、私は私のマークアップで、それは次のようになり、データベース内のクラス名を格納するために選んだ：私のサスに続いて

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

、私は色のマップを格納しています：

$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; 
     } 
    } 
    } 
}