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 custom properties。

: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>

Browser compatibility并不完美。