[basic] LESS - Escaping (회피 = 이스케이핑)・Function (함수)

Escaping (회피 = 이스케이핑) 정의

[정의]

 

Escaping : 임의의 문자열을 속성이나 변수값으로 사용 가능케 함.

 

※ LESS 3.5부터는 많은 경우에서 Escaping 불필요해짐.

 

---

[구문]

 

~"anything" 또는 ~'anything' 
※ anything은 interpolation을 제외하고 변경없이 그대로 사용 가능.

 

Escaping (회피 = 이스케이핑) 예제

style.less

 

@min768: ~"(min-width:750px )";

.element {

    @media @min768 {

        font-size: 1.2rem;

    }

}

 

PS. 

LESS 3.5 버전 이상 경우, 아래처럼 작성 가능. 

 

@min768: (min-width:750px );

.element {

    @media @min768 {

        font-size: 1.2rem;

    }

}

 

---

style.css

 

@media (min-width:750px ) {

    .element {

        font-size: 1.2rem;

    }

}

 

Function (함수)

 

1. 색상 변환, 문자열 조작, 수학적 연산 등 반복 작업 수행에 적합.

2. 사용법 아주 간단. (아래 예제 참고) 더 자세히 보기

 

---

(예제)

너비 0.5를 50%로 표시.

색 채도를 5 % 늘림.

배경색을 25% 밝게하고, 8도 회전하는 색으로 설정.

 

@base: #f04615;

@width: 0.5;

.class {

    width: percentage(@width);    

    color: saturate(@base, 5%);

    background-color: spin(lighten(@base, 25%), 8);

}