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

时间:2019-04-04 20:35:04

标签: css variables sass colors scss-mixins

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

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

示例示例

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

在SCSS中

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

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

2 个答案:

答案 0 :(得分:2)

您甚至不需要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>的支持却很少。

答案 1 :(得分:0)

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

IServiceProvider