LESS：色相、彩度、明度 - 使用方法は？

Question

数日のうちにお試しください。 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; 
    } 

しかし、空に示す最初の3つのクラスが、何を示すしません - 何の背景色を。しかし箱は幅が&の高さです。 Photoshopは私のためにした何

：

私はHSLの変化にPhotoshopでカラーコードをチェックするには、彼らはすべての異なる組み合わせで異なる色を示します。それで私の弱点がなぜ私を欺いているのですか？

Answer 1

HSLレッスン関数は、名前の示すの部分のの整数値ではなく、色を返しません。 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はあなたが色のパーツを分解することを必要とせず、色相を変更することを言及する価値があります。具体的には、「色の色相角をどちらの方向にも回転させます」。

手動で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; 
}