萨斯：变量选择的名称作为值。 （后缀）

Question

如何使用一个类名（选择）作为值的后缀？例如注入宽度在动态类名等：

CSS或青菜的伪代码。

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

qazxsw POI是不完美的。