6

尝试 LESS 几天。HSL 出现问题 - 色相-饱和度-亮度，或者可能是我理解的问题，恐怕。

我尝试了以下 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 为我做了什么：
颜色和 HSL - Photoshop 为我做的

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

4

1 回答 1

5

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

从文档中：

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() 函数将修改色调，而无需您分解颜色部分。具体来说，它将“在任一方向旋转颜色的色调角度”。

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

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

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

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

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

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

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

// rendered as
.foo {
  color: #5978de;
}
于 2013-09-30T06:48:41.603 回答