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)와 그 자신의 채도와 밝기로 구성될 것입니다.
