[HTML5&CSS3] Less 스타일시트 - 내장 함수

1. 색상 변환 관련

 

색상의 변환과 관련해 사용할 수 있는 함수로는 대략 다음과 같은 것들이 있습니다.

 

lighten	지정된 색상을 밝게합니다.
darken	지정된 색상을 어둡게 합니다.
saturate	지정된 색상을 두드러지게 합니다.
desaturate	지정된 색상을 두드러지지 않게 합니다.
fadein	지정된 색상을 투명하게 합니다.
fadeout	지정된 색상을 불투명하게 합니다.
fade	지정된 색상을 반투명하게 합니다.
spin	지정된 색상의 속성을 변경합니다.
mix	지정된 색상을 섞습니다.

 

위 함수는 공통적으로 '색상, % 단위' 형식으로 값을 전달받으며 예외적으로 mix는 첫 번째와 두 번째 모두 색상을 파라미터 값으로 받습니다.

@color : #FFF000;

div:nth-child(1) { background-color : lighten(@color, 20%); }
div:nth-child(2) { background-color : lighten(@color, 40%); }
div:nth-child(3) { background-color : lighten(@color, 60%); }

 

---

2. 색상추출 관련

 

색상 추출과 관련해 사용할 수 있는 함수는 다음과 같은 것들이 있습니다.

 

hue	색상에서 hue 색상을 추출합니다.
saturation	색상에서 saturation 색상을 추출합니다.
lightness	색상에서 lightness 색상을 추출합니다.
alpha	색상에서 alpha 색상을 추출합니다.

 

위 함수모두 하나의 색상을 값으로 전달받습니다.

@color : #FFF000;
@hue : hue(@color);

div {
  background-color: rgba(100, 100, 100, @hue / 100);
}

---

3. 숫자관련

 

숫자와 관련해서는 대략 다음과 같은 함수를 사용할 수 있습니다.

 

round	지정된 숫자를 반올림합니다.
ceil	지정된 숫자를 올림합니다.
floor	지정된 숫자를 내림합니다.
percentage	지정된 숫자를 퍼센트 단위로 변경합니다.

 

위 함수 모두 하나의 숫자를 전달받습니다.

---

4. 자료형 확인 관련

 

특정 데이터 형식을 확인하기 위한 함수로는 다음과 같은 것들이 있습니다.

 

iscolor	지정된 값이 색상값인지를 확인합니다.
isnumber	지정된 값이 숫자값인지를 확인합니다.
isstring	지정된 값이 문자열값인지를 확인합니다.
iskeyword	지정된 값이 키워드인지를 확인합니다.
isurl	지정된 값이 url인지 확인합니다.
ispixel	지장된 값이 픽셀값인지를 확인합니다.
ispercentage	지장된 값이 %단위값인지를 확인합니다.
isem	지장된 값이 배수단위값인지를 확인합니다.

---

5. 믹스인 (사용자 정의 함수)

 

미리 내장된 형식의 함수를 사용하는 대신에 직접 함수를 만들어서 사용할 수도 있습니다. 함수는 '.함수명() {}' 형태로 선언합니다.

.div_back_color() {
  background-color: #ff0000;
}

그리고 함수를 호출할 때는 '.함수명()'으로 합니다.

div {
  color: red;
  .div_back_color();
}

함수는 매개변수를 설정해 함수를 호출할 때마다 특정값을 전달할 수도 있습니다. 매개변수는 함수의 괄호 안에서 (@변수명, @변수명...) 형식으로 설정합니다.

.div_back_color(@color) {
  background-color: @color;
}

div {
  color: red;
  .div_back_color(#ff0000);
}

 

필요하다면 일부 내장 함수를 응용해 사용하는 것도 가능합니다.

.div_back_color(@color) when (iscolor(@color)) {
  background-color: @color;
}

div {
  color: red;
  .div_back_color(cliel);
}

위 예제에서는 when 키워드를 사용해 전달되는 값이 색상값인지를 판단하고 있습니다. 만약 색상 이외에 엉뚱한 값을 전달하면 함수가 실행되지 않게 됩니다.

 

 

이외에 when키워드를 사용하면 전달되는 값을 다양하게 판별할 수 있습니다.

.div_back_color(@hue) when (@hue > 0.5) {
  background-color: rgba(100, 100, 100, @hue / 100);
}

div {
  color: red;
  .div_back_color(0.6);
}

 

또한 내장 함수를 직접 작성한다면 값이 아예 없을 경우를 대비해 '@변수:값'의 형태로 기본값을 지정할 수도 있습니다.

.div_back_color(@hue : 0.5) {
  background-color: rgba(100, 100, 100, @hue / 100);
}

div {
  color: red;
  .div_back_color();
}