使用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); }

<强> LIVE DEMO

Answer 2

您可以使用control directives。

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