我正在尝试为SCSS中的颜色创建动态解决方案
这个想法是使用标记中的属性值作为SCSS中的属性值。
示例示例
<p text-color="#00ff6e"> Sample </p>
在SCSS中
[text-color="$color"] {
color: $color !important;
}
这甚至可能吗?您是否尝试过构建类似的东西? 感谢您的帮助!
答案 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