Как написать классы с параметром в scss?

Question

Можно ли написать класс с предопределенным цветом HexCodes? Так что в моем HTML я могу создавать такие элементы, как:

$yellow: #FFFF00; 

.color($colorName) { 
color: $colorName; 
} 

<div class="color(yellow)"> 
</div> 

Это будет мое решение проблемы. Моя проблема в том, что я получил слишком много классов с цветами в моем scss-файле.

Спасибо

Answer 1

Вы можете достичь этого в SCSS довольно легко. Для быстрого решения: here's the code in a JSfiddle.

Более сложное объяснение:

С SASS 3.3 вы можете использовать map data structure. Они хранят смесь пар ключ/значение:

$map: (key1: value1, key2: value2, key3: value3); 

Таким образом, в вашем случае, вы можете создать карту цветов (до тех пор, или коротким, как вам нравится) для дальнейшего использования:

$colors: (
    red: #ff0000, 
    yellow: #ffd000, 
    blue: #00baff, 
    green: #00ff00 
); 

Теперь, чтобы сгенерировать классы CSS вам нужно перебираем карту с хорошим битом ШАОН:

@each $colorname, $color in $colors { 
    .square--#{$colorname} { 
     background-color: $color; 
    } 
} 

Все это @each цикл делает цикл по каждой паре ключ/значение в $ цветов, назначение клавиш (например: красный) - $ colorname и значение (например: # ff0000) - цвет $.

Составленный CSS будет:

.square--red { background-color: #ff0000; } 
.square--yellow { background-color: #ffd000; } 
.square--blue { background-color: #00baff; } 
.square--green { background-color: #00ff00; } 

Если в будущем вы хотите добавить новый цвет, это так же просто, как добавить ключ/значение пары до $ цвета карты и компиляции!