是否有一种方法可以根据父母的背景颜色更改按钮的背景颜色?

时间:2018-05-24 14:03:17

标签: html css css3 inheritance sass

我正在为一个新项目编写一个完整的css库。

目前我遇到了一些我想要达到的目标,但我开始怀疑它是否有可能。

我们有几种不同的按钮类型。其中一种类型是按钮,但有两种可能的背景颜色(如果是白色bg则呈灰色;如果是灰色bg则呈白色) 我可以在按钮上添加另一个类来指定bg是否需要为灰色但是我不喜欢这样,因为我认为可能有更好的解决方案(我也认为这可能会导致以后我们允许用户使用时出现问题在我们的平台上选择黑暗或浅色主题。)

我还尝试通过联系祖先来检查它是否有一个类指定更深的bg(例如.container-dark)...... 只要我没有将按钮放在带有灰色bg的容器中带有白色bg的容器中,这确实有效。此时css仍然会找到类.container-dark的祖先,因此只要它在白色容器内就会给按钮一个白色的bg ....

我也谈到将background-color设置为'inherit',然后使用带if / else的函数但我无法弄清楚如何访问按钮background-color(它在那一刻继承了) )......

如果你知道这是否可能,请告诉我,欢迎任何想法!

亲切的问候

1 个答案:

答案 0 :(得分:3)

没有。 SASS只处理CSS的生成。

由于父元素的背景颜色是通过在运行时将CSS应用于DOM来确定的,因此SASS无法计算它。它运行得不够晚。

您需要使用客户端JS来解决此问题。