使用Sass根据背景颜色更改颜色 [英] Change color depending on background color with Sass

问题描述

我想设置一些简单的颜色规则，这些规则将自动为我选择字体颜色变量.我希望文本颜色取决于父div的背景颜色.

I want to set up some sass color rules that will automatically choose the font color variable for me. I want the text color to be dependent on what color the background color of the parent div is.

如果

div {background-color: #000; }

然后

div p { color: #fff; }

如何用sass做到这一点?

How can this be achieved with sass?

推荐答案

您可以对background-color使用lightness()函数来确定color值，如下所示:

You could use lightness() function for the background-color to determine the color value, as follows:

@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.

这篇关于使用Sass根据背景颜色更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！