使用Sass根据背景颜色更改颜色

Question

我希望设置一些Sass颜色规则，能够自动为我选择字体颜色变量。我希望文本颜色取决于父元素div的背景颜色。

如果

div {background-color: #000; }

然后

div p { color: #fff; }

如何使用sass实现这一目标？

- whatsnewsaes

Answer 1

您可以使用 lightness() 函数来确定 background-color 的颜色值，如下所示：

@function set-color($color) {
    @if (lightness($color) > 40) {
      @return #000;
    }
    @else {
      @return #FFF;
    }
}

然后像下面这样使用上述函数:

div { background-color: black; // Or whatever else }
div p { color: set-color(black); }

在线演示.

- Hashem Qolami

Answer 2

你可以使用流程控制规则。

这取决于目的，但根据特定条件更改背景颜色可能有更简单的方法，例如JavaScript。

- Dani