Sass: имя селектора переменной в качестве значения.(Суффикс)

Question

Как использовать суффикс имени класса (селектор) в качестве значения?Например, введите ширину в имя динамического класса, например:

Псевдокод CSS или sass.

<div class="column width-120"></div>

.column.width[$width] {
  width: {$width + 'px'};
}

или используйте его для имен динамических значков.

<div class="icon-home"></div>

.icon-[$name] {
  background-image: url({$name});
}

Для атрибутов это возможно методом attr().Это также возможно для имени класса?

Решение для атрибута:

<div class="icon" name="home"></div>

.icon {
  background-image: url(attr(name));
}

Answer 1

Вы можете использовать Пользовательские свойства CSS .

:root {
  --color: green;
}

.icon {  
  width: 20px;
  height: 20px;
  background-color: var(--color);
}

<div class="icon" style="--color: red;"></div>
<div class="icon" style="--color: blue;"></div>

Совместимость с браузерами не работает.