Sass：变量选择器名称作为值。（后缀）答案

【问题标题】：Sass: Variable selector name as value. (Suffix)Sass：变量选择器名称作为值。（后缀）
【发布时间】：2019-02-03 22:32:18
【问题描述】：

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

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));
}

【问题讨论】：

对动态类使用 ngClass 属性
我使用 Angular，对。但我的问题与 Angular 无关。这是关于选择器名称中的 css/sass 变量。如果我使用 ngClass，我仍然必须使用固定（预定义）名称。在这种情况下，所有图标名称都必须存在于 css 文件中。我的问题是要在 sass 文件中使用动态图标名称。 ...
这不是你想要实现的，因为 sass 的想法是编译成一个静态的 css 文件，而你在 css 中没有这种功能。让这些类名起作用的唯一方法是生成所有可能的宽度和图标值。
感谢您的确认。我早就猜到了。现在我使用 JavaScript（Angular / TypeScript）通过 html 样式声明覆盖样式。 ViewChild() 原生元素。 ...不确定这是否是我的最终解决方案，但它有效。 ...这是正确的，sass 转换为 css 并且 css 或多或少是静态的。更少，因为可以使用变量或动态值，例如 attr() 函数。但这有点实验性。它主要用于 url 和内容的字符串。非常适合我的图标示例。但不适用于动画持续时间等其他单位。 ...

【解决方案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>

【讨论】：