使用 Sass 根据背景颜色更改颜色 [重复]

【问题标题】：Change color depending on background color with Sass [duplicate]使用 Sass 根据背景颜色更改颜色 [重复]
【发布时间】：2014-03-15 04:45:03
【问题描述】：

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

如果

div {background-color: #000; }

那么

div p { color: #fff; }

如何使用 sass 实现这一点？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以使用control directives。

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

【讨论】：