Использование Sass для динамических цветов

Question

.brown,.blue,.pink,.orange,.red,.yellow,.green,.navy,.taxes { 
display:block; 
text-align:center; 
font-size:10px; 
font-family:Helvetica; 
font-weight:700; 
background:#000;/*<--- the color of this should be brown, blue, pink etc*/ 
color:#fff; 
width:100%; 
} 
.brown{ 
background: brown; 
} 

В данный момент я хочу добиться этого эффекта. Мой вопрос: какой самый эффективный способ достижения этого эффекта? В SASS я мог бы это сделать, но мне все равно пришлось бы написать 6 разных переменных для каждого цвета, поэтому не уверен, как это более эффективно.

Также следует отметить, что вместо имен имен я использую имена классов, потому что каждый цвет имеет несколько экземпляров, есть 2 коричневые, 3 блюза, 3 гвоздики. Итак, правильно ли я использую классы, так как идентификатор должен действительно использоваться для уникальных значений?

Answer 1

Я бы не советовал кодировать ваш CSS таким образом, но вы могли бы составить список, а затем прокрутить его. Например:

SASS

$colorList: 
    "white" #fff, 
    "grey" #ccc 
; 

@each $i in $colorList { 
    .color-#{nth($i,1)} { 
     background-color: nth($i,2); 
    } 
} 

Выходной CSS

.color-grey { 
    background-color: #ccc; 
} 

.color-white { 
    background-color: #fff; 
}