如何在SCSS中将属性用作属性值

Question

我正在尝试为SCSS中的颜色创建动态解决方案

这个想法是使用标记中的属性值作为SCSS中的属性值。

示例示例

<p text-color="#00ff6e"> Sample </p>

在SCSS中

[text-color="$color"] {
  color: $color !important;
}

这甚至可能吗？您是否尝试过构建类似的东西？ 感谢您的帮助！

Answer 1

您甚至不需要SCSS-使用CSS custom properties即可！

p {
  color: var(--text-color) !important;
}

<p style="
  --text-color: #00ff6e;
"> Sample </p>

请注意，即使在常绿的浏览器中自定义属性具有wide support，目前也完全缺少Internet Explorer的支持（edge从版本16开始就提供了全面的支持）。

您可能会尝试使用attr()函数，但是在这种情况下会失败；其值始终被视为CSS字符串。
此外，根据MDN，它仅在content属性中具有强大的支持，并且尽管attribute-name参数具有一致的行为，对<type-or-unit>的支持却很少。

Answer 2

我永远没有理由这样做，尤其是如果我可以添加一个设置以下内容的可重用类：

IServiceProvider