Как передать переменную в SCSS / CSS из имени класса HTML?

Question

Что я хочу сделать, так это

HTML

<div class="custom-color--ff0000">Red</div>
<div class="custom-color--00ff00">Green</div>
<div class="custom-color--0000ff">Blue</div>

CSS

.custom-color--(hex) {
  color:  '#' + (hex);
}

Возможно ли это сделать? Мне нужен Sass?

Answer 1

Вы можете использовать миксин для генерации классов модификаторов в SASS:

@mixin add-color($argument) {
  $string: unquote($argument);

  &--#{$string} {
    color: unquote('#' + $argument);
  }
}

пример:

.custom-color {
  @include add-color(404145);
  @include add-color(ff0000);
}

вывод в CSS:

.custom-color--404145 {
  color: #404145;
}

.custom-color--ff0000 {
  color: #ff0000;
}

Подробнее об этом здесь: Генерация всех ваших служебных классов с помощью Sass Maps

Answer 2

Не знаю, почему вы хотите это сделать, но я думаю, что вы можете добиться аналогичного, используя CSS пользовательские свойства .

Например:

HTML

<div class="custom-color" style="--red: #ff0000">Red</div>
<div class="custom-color" style="--green: #00ff00">Green</div>
<div class="custom-color" style="--blue: #0000ff">Blue</div>

CSS

.custom-color {
  color:  var(--red); // or what color you want
}