css - LESS : hue, 饱和度和亮度 - 如何使用？

Question

尝试 LESS 几天。 HSL - Hue-Saturation-Lightness 出现问题，恐怕这可能是我理解的问题。

我尝试了以下 HTML:

<div class="box hue">1</div>&nbsp;<div class="box saturation">2</div>&nbsp;<div class="box lightness">3</div>

并相应地尝试了 LESS:

   @color2: #167e8a;
    .hue{
      background-color: hue(@color2);
    }

    .saturation{
      background-color: saturation(@color2);
    }

    .lightness{
      background-color: lightness(@color2);
    }


    .box{
      width: 50px;
      height: 20px;
    }

但是前三个类显示为空，没有显示任何内容——没有背景色。但是盒子正在占用宽度和高度。

Photoshop 为我做了什么:

我检查了 Photoshop 中的颜色代码以及 HSL 的变化，它们都以不同的组合显示出不同的颜色。那为什么我的LESS在欺骗我呢？

Answer 1

HSL LESS 函数不返回颜色，而是返回名称指示的颜色部分的整数值。

来自documentation :

hue(@color); // returns the `hue` channel of @color in the HSL space

例子

.foo{
    color: hue(#167e8a);
}

// rendered as
.foo {
  // invalid...hence you don't see a color
  color: 186;
}

在继续之前，值得一提的是 spin() function将修改色调而不需要您分解颜色部分。具体来说，它将“在任一方向上旋转颜色的色调 Angular 。”

即使您希望手动分解 HSL，也很简单。

@h: hue(#167e8a);
@s: saturation(#167e8a);
@l: lightness(#167e8a);

.foo{
    color: hsl(@h,@s,@l);  
}

// rendered as
.foo {
  color: #167d88;
}

更重要的是，您可以提取提取的 channel ，对其进行修改，然后重建颜色:

@h: hue(#167e8a) + 40;
@s: saturation(#167e8a) - 5;
@l: lightness(#167e8a) + 30;

.foo{
    color: hsl(@h,@s,@l);  
}

// rendered as
.foo {
  color: #5978de;
}