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>

浏览器兼容性不明显。