색상 관련 함수

LESS provides a variety of functions which transform colors. Colors are first converted to the HSL color-space, and then manipulated at the channel level:

lighten(@color, 10%);     // @color보다 10%만큼 *밝은* 색깔을 반환합니다.
darken(@color, 10%);      // @color보다 10%만큼 *어두운* 색을 반환합니다.
saturate(@color, 10%);    // @color보다 10%만큼 더 *saturated*된 색을 반환합니다.
desaturate(@color, 10%);  // @color보다 10%만큼 덜 *saturated*된 색을 반환합니다.

fadein(@color, 10%);      // @color보다 10%만큼 더욱 *불투명한* 색상을 반환합니다.
fadeout(@color, 10%);     // @color보다 10%만큼 더욱 *투명한* 색상을 반환합니다.
fade(@color, 50%);        // 50%의 투명도를 가지는 색상 @color를 반환합니다.

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // @color1과 @color2를 믹스한 것을 반환한다.

사용하는 방법은 매우 직관적이며 간단합니다:

@base: #f04615;

.class {
 color: saturate(@base, 5%);
 background-color: lighten(spin(@base, 8), 25%);
}

색상 정보를 추출할 수도 있습니다:

hue(@color);        // @color의 ‘색조 (hue)’ 채널을 반환합니다.
saturation(@color); // @color에서 `채도 (saturation)` 채널을 반환합니다.
lightness(@color);  // @color에서 '밝기 (lightness)' 채널을 반환합니다.
alpha(@color);      // @color에서 '알파 (alpha)' 채널을 반환합니다.

다른 색상 채널을 기반으로 새로운 색상을 만들 때에, 이 기능이 유용합니다. 예를 들면:

@new: hsl(hue(@old), 45%, 90%);

@new 는 @old의 색조 (hue)와 그 자신의 채도와 밝기로 구성될 것입니다.