css – 根据背景颜色改变颜色,使用Sass [复制]

前端之家收集整理的这篇文章主要介绍了css – 根据背景颜色改变颜色,使用Sass [复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参见英文答案 > Sass – Manipulate inherited property?                                    4个
我想设置一些sass颜色规则,它会自动为我选择字体颜色变量.我希望文本颜色取决于父div的背景颜色是什么颜色.

如果

div {background-color: #000; }

然后

div p { color: #fff; }

如何用sass实现这一目标?

最佳答案
您可以使用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); }

LIVE DEMO.

猜你在找的CSS相关文章