html - sass 有没有办法根据其父级的背景色更改按钮的背景色？

Question

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

目前，我被我想要实现的目标所困，但我开始怀疑它是否可能。

我们有几种不同的按钮类型。其中一种类型是按钮，但有两种可能的背景颜色（如果在白色背景上为灰色；如果在灰色背景上则为白色）我可以向按钮添加另一个类以指定背景是否需要为灰色，但我不会不喜欢这样，因为认为可能会有更好的解决方案（我还认为，当我们允许用户在我们的平台上选择深色或浅色主题时，这可能会导致问题）。

我还尝试通过联系祖先来检查是否有一个类指定较暗的背景（例如.container-dark）来修复它......只要我不把按钮放在带有白色背景的容器 whitin 带有灰色背景的容器。此时，css 仍会找到具有 .container-dark 类的祖先，因此即使按钮位于白色容器内，也会给按钮一个白色 bg....

我还考虑将背景颜色设置为“继承”，然后使用带有 if/else 的函数，但我不知道如何访问按钮背景颜色（它当时已继承）.. ..

如果您知道这是否可能，请告诉我，欢迎提出任何想法！

亲切的问候

标签： htmlcssinheritancesass

Answer 1

不，SASS 只处理 CSS 的生成。

由于父元素的背景颜色是由 CSS 在运行时对 DOM 的应用决定的，所以 SASS 无法计算它。它运行得不够晚。

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