渲染具有用戶選擇的顏色的組件

我有一個表單，我向用戶詢問某個特定項目的顏色，並將其存儲爲表示十六進制值的模型中的字符串（例如：#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，因爲這樣會很慢。

我會在很多組件中使用這種顏色，實現這一點的靈活方式是什麼？

來源

2016-08-24 Carlos Martinez

所以，我選擇了在數據庫中存儲的類名，在我的標記它應該是這樣的：

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

來源

2016-08-26 17:12:37

渲染具有用戶選擇的顏色的組件

回答

相關問題