使用 Sass 根据背景颜色更改颜色
我想设置一些 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()
函数来判断颜色
值,如下:
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;
}
}
然后使用上面的函数如下:
Then use the above function as below:
div { background-color: black; // Or whatever else }
div p { color: set-color(black); }
现场演示.
相关文章