Question

我想基于颜色的各个HSL值以编程方式调整样式。具体来说，如果背景颜色足够深，那么我想自动将文本颜色更改为白色，反之亦然。

我试图实现的伪代码类似

@mixin text-color($color)
    if lightness of $color > 127
        color: #000
    else
        color: #fff

Mixin用法：

.something {
    background-color: $blue;
    @include text-color($blue);
}

这可能吗？我可以使用SASS将颜色分解为单独的H，S和L值吗？

Answer 1

您可以使用内置的lightness function来返回$ color的HSL亮度，其值为介于0％和100％之间的数字。

$blue: blue;

@mixin text-color($color) {
  color: if(lightness($color) > 50%, #000, #fff);
}

.something {
  background-color: $blue;
  @include text-color($blue);
}

另外，请注意，您可以改用函数，这样就不会仅限于color属性。

$blue: blue;

@function text-color($color) {
  @if lightness($color) > 50% {
    @return #000;
  } @else {
    @return #fff;
  }
}

.something {
  background-color: $blue;
  color: text-color($blue);
}

使用SASS从十六进制获取各个HSL值

1 个答案: