如何在 SCSS 中使用属性作为属性值答案

【问题标题】：How to use attribute as property value in SCSS如何在 SCSS 中使用属性作为属性值
【发布时间】：2020-09-23 22:45:31
【问题描述】：

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

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

想法的例子：

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

在 SCSS 中

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

这甚至可能吗？你有没有尝试过构建这样的东西？感谢您的帮助！

【问题讨论】：

【解决方案1】：

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

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

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

请注意，尽管自定义属性在常青浏览器中具有 wide support，但目前完全缺乏对 Internet Explorer 的支持（从版本 16 开始，edge 已完全支持）。

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

【讨论】：

【解决方案2】：

我永远没有理由这样做，特别是如果我可以添加一个可重用的类来设置：

.text-color {
  color: $color;
}

【讨论】：