Less (스타일시트 언어)

1. 개요

Less는 CSS를 확장하는 스타일시트 언어이다. 변수 정의, 믹스인, 중첩, 함수 및 연산 등의 기능을 제공하여 CSS 코드를 더욱 효율적으로 작성할 수 있도록 돕는다. Sass와 유사하게 CSS 전처리기로서, CSS를 프로그래밍 방식으로 작성할 수 있게 해준다. Less는 다양한 컴파일러, 편집기 및 플러그인을 통해 지원되며, 윈도우, macOS, 리눅스 등 다양한 플랫폼에서 사용 가능하다.

2. 기능

Less는 CSS 전처리기(preprocessor)로서, CSS의 기능을 확장하여 코드의 재사용성과 유지보수성을 높여준다. Less의 주요 기능은 다음과 같다.

* 변수: 골뱅이표(@)를 사용하여 변수를 정의하고, 콜론(:)을 사용하여 값을 할당한다. 변수는 코드 내에서 반복되는 값을 쉽게 관리하고 수정할 수 있게 해준다.
* 믹스인 (Mixin): 믹스인은 클래스의 속성을 다른 클래스에 포함시켜 코드의 반복을 줄이고, 마치 함수처럼 인수를 받아 동적으로 스타일을 생성할 수 있게 한다. CSS는 믹스인을 지원하지 않기 때문에 Less의 유용한 기능 중 하나이다.
* 중첩 (Nesting): Less는 CSS 선택자를 중첩하여 코드의 가독성을 높이고, 상속 관계를 명확하게 표현할 수 있다.
* 함수 및 연산: Less는 덧셈, 뺄셈, 곱셈, 나눗셈 등의 연산을 지원하여 속성 간의 관계를 표현하고, 함수를 통해 값을 조작할 수 있다.

2.1. 변수

Less는 변수 정의를 허용한다. Less에서 변수는 골뱅이표(@)로 정의되며, 변수 할당은 콜론(:)을 통해 이루어진다.

변환 중에 변수의 값들은 출력 CSS 문서에 삽입된다.

```less
@pale-green-color: #4D926F;

#header {
color: @pale-green-color;
}
h2 {
color: @pale-green-color;
}
```

위의 Less 코드는 다음의 CSS 코드로 컴파일된다.

```css
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

2.2. 믹스인 (Mixin)

믹스인(mixin)은 클래스 이름을 속성 중 하나로 포함시킴으로써 클래스의 모든 속성을 다른 클래스 안으로 포함시키는 것을 허용하며, 이로써 일종의 상수나 변수처럼 동작한다. 이들은 마치 함수처럼 동작하며 인수를 취한다. CSS 자체는 믹스인을 지원하지 않으므로, 반복되는 코드는 각 위치에 반복되어야 한다. 믹스인은 더 효율적이고 깨끗한 코드 반복을 허용하며 쉬운 코드 변경 또한 가능케 한다.

```less
.rounded-corners (@radius: 5px 10px 8px 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px 25px 35px 0px);
}
```

위의 Less 코드는 다음의 CSS 코드로 컴파일된다:

```css
#header {
-webkit-border-radius: 5px 10px 8px 2px;
-moz-border-radius: 5px 10px 8px 2px;
border-radius: 5px 10px 8px 2px;
}
#footer {
-webkit-border-radius: 10px 25px 35px 0px;
-moz-border-radius: 10px 25px 35px 0px;
border-radius: 10px 25px 35px 0px;
}
```

Less는 파라메트릭 믹스인(parametric mixin)이라는 특별한 타입의 룰셋(ruleset)이 있어서 클래스처럼 믹스가 가능하지만 파라미터를 수락한다.

```less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 16px;
a {
text-decoration: none;
color: red;
&:hover {
border-width: 1px;
color: #fff;
}
}
}
}
```

위의 Less 코드는 다음의 CSS 코드로 컴파일된다:

```css
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 16px;
}
#header p a {
text-decoration: none;
color: red;
}
#header p a:hover {
border-width: 1px;
color: #fff;
}
```

2.3. 중첩 (Nesting)

CSS는 논리적인 중첩을 지원하지만, 코드 블록 자체가 중첩되어 있지는 않다. LESS를 사용하면 다른 선택자 내부에 중첩이 가능하며, 명확한 상속과 간소화에 도움이 된다.

다음은 LESS 코드 예시이다.

```less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}
```

위 코드는 다음과 같이 CSS로 컴파일된다.

```css
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

2.4. 함수 및 연산

Less는 속성 값과 색상에 대한 덧셈, 뺄셈, 나눗셈, 곱셈 등의 연산을 지원하여 속성 간의 복잡한 관계를 표현할 수 있다. 또한, 함수는 자바스크립트 코드와 일대일로 매핑되어 값을 조작할 수 있게 한다.

```less
@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
```

위 Less 코드는 다음과 같이 CSS로 컴파일된다.

```css
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

3. Sass와의 비교

Sass는 Less와 함께 널리 사용되는 CSS 전처리기 중 하나로, 프로그래밍 구문을 통해 CSS를 효율적으로 작성하도록 돕는다. Less는 Sass에서 영감을 받아 개발되었다.

Sass는 초기에 CSS를 간소화하고 확장하는 데 중점을 두어 중괄호({})와 같은 요소를 제거했다. 반면 Less는 CSS와의 호환성을 최대한 유지하도록 설계되어, 기존 CSS 코드를 Less에서도 그대로 사용할 수 있었다. 이후 Sass는 SCSS(Sassy CSS)라는 새로운 구문을 도입하여 CSS와 유사한 형태로 작성할 수 있게 되었다. Less는 버전 1.4부터 네스팅(nesting)과 `&:extends`, `@extends` 의사(pseudo) 선택자를 통한 상속을 지원한다.

더 자세한 구문 비교는 여기에서 확인할 수 있다.

4. Less 소프트웨어

Less 코드를 CSS로 컴파일하는 다양한 도구들이 존재한다. 윈도우, 맥 OS X, 리눅스 등 다양한 플랫폼에서 사용할 수 있는 컴파일러, 편집기, 플러그인 등이 있다.

4.1. 주요 Less 소프트웨어 목록