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

Question

我想设置一些sass颜色规则,它会自动为我选择字体颜色变量.我希望文本颜色取决于父div的背景颜色是什么颜色.

如果

div {background-color: #000; }

然后

div p { color: #fff; }

如何用sass实现这一目标？

Answer 1

您可以使用lightness()函数background-color来确定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); }

现场演示.

Answer 2

您可以使用流量控制规则。

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