@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}

스타일 안에 less.js를 포함시켜 주세요:

변수

변수를 사용하면, 이곳저곳에서 사용하는 값을 한 곳에 넣어둘 수 있습니다. 그리고 스타일 시트 전체에서 사용할 수 있죠. 그래서 무언가 고쳐야 할 때에, 변수 부분의 코드 한 줄만 바꾸면 되어서 작업이 편해집니다.

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

/* 컴파일한 CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

믹스인 (Mixins)

믹스인(Mixin)은 한 클래스 안에서 하나의 속성 이름으로 지정하는 방식을 통해 다른 클래스의 모든 속성들을 포함시킬 수 있게 해줍니다. 이것은 마치 변수들 같지만 사실은 클래스 전체를 의미합니다. 믹스인은 또한 함수처럼 변수도 받아들이기도 합니다. 아래의 예시를 보세요.

// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

/* 컴파일된 CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

중첩 또는 포함에 관한 규칙

CSS 속성 상속을 위해 긴 선택자(selector)를 만드는 방법 대신, LESS에서는 한 선택자를 다른 선택자 안에 포함시킬 수 있습니다. 이를 통해 CSS 속성 상속을 훨씬 더 간결하게, 그리고 스타일 시트를 짧게 만들 수 있습니다.

// LESS로 작성한 코드

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

/* 컴파일한 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;
}

함수와 연산

스타일시트 안의 어떤 요소들이 다른 요소들에 대해 비례하나요? 연산 (operation)은 속성값과 색상값들을 더하고, 빼고, 곱하고 나누게 하는 것을 통해 속성들 사이의 복잡한 관계들을 정의할 수 있게 해줍니다. 함수는 자바스크립트 코드와 일대일 대응을 시켜 당신이 원하는 속성값들은 무엇이든지 생성해 낼 수 있게 합니다.

// 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%);
}

/* 컴파일한 CSS */

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

클라이언트쪽 사용방법

스타일 시트를 정의할 때 .less 파일을 링크시키고, rel 속성값을 “stylesheet/less”로 지정합니다:

그런 다음 페이지의 상단에서 less.js를 다운로드 받으세요. 그리고 페이지의 <head>요소에다가 다음처럼 포함시키세요.:

단, 스타일시트가 스크립트 앞에 와야 합니다.

관찰 모드(Watch mode)

관찰 모드는 클라이언트쪽 기능으로, 이 기능을 활성화하면 스타일시트를 변경했을 때, 자동으로 갱신됩니다.

이 기능을 활성화 시키려면 브라우저 주소창에서 URL의 뒷부분에 ‘#!watch’를 추가하고, 페이지를 다시 한번 로드시키면 됩니다. 다른 방법으로는 자바스크립트 콘솔 창에서 less.watch() 명령을 실행시킬 수도 있습니다.

서버쪽에서 사용하는 방법

설치 방법

LESS 를 서버에 설치하는 가장 쉬운 방법은 npm, 노드 패키지 매니저(Node Package Manager) 를 이용하는 겁니다. 방법은 다음과 같습니다:

$ npm install less

사용하는 방법

일단 설치하고 나면, 노드에서 컴파일러를 호출할 수 있습니다. 다음처럼 하면 됩니다:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});

아래와 같이 나올 겁니다.

.class {
width: 2;
}

파서와 컴파일러를 수동으로 호출할 수도 있습니다.:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});

환경설정

몇 개의 옵션을 컴파일러에게 넘겨줄 수 있습니다:

var parser = new(less.Parser)({
paths: ['.', './lib'], //@import 명령어를 사용할 때, 파일을 검색할 경로를 지정합니다.
filename: 'style.less' //좀 더 자세하고 정확한 에러메시지를 보시려면, 파일명을 지정하세요.
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // 만든 CSS를 최소화(minify)시킵니다. (역자주 : 최소화(Minify) : CSS파일에서는 가독성을 높이기 위해 공백문자를 많이 사용한다. 이런 것을 최소화시켜 CSS 사이즈를 줄인다.))

});

커맨드 라인 명령 사용법

Less 안에는 커맨드 라인에서 컴파일러를 호출하는 실행 파일이 있습니다:

$ lessc styles.less

이 명령어는 만들어진 CSS를 stdout(*역주: 표준출력)에 출력 해줍니다, 특정 파일에 넣고 싶다면 이렇게 하세요:

$ lessc styles.less > styles.css

사이즈를 최소화시킨 CSS를 출력하기 위해서는 단지 -x 옵션을 추가하면 됩니다. 더욱 더 최소화시키고 싶다면 YUI CSS Compressor를 --yui-compress 옵션을 통해 사용할 수 있습니다.

언어 LESS 소개

CSS의 확장으로서 LESS는 CSS에 대해 하위호환성을 갖습니다. 뿐만 아니라, LESS가 추가한 기능들은 기존의 CSS 문법을 이용합니다. 따라서 LESS를 배우는 것은 아주 쉽죠. 확신이 안 들 때에는 그냥 다시 CSS로 돌아가도 됩니다.

변수

아래 예제들을 보면 저절로 설명이 가능할 겁니다:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

다음처럼 만들어집니다:

#header { color: #6c94be; }

변수 이름으로 변수를 정의하는 것도 가능합니다:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

이렇게 하면 다음과 같이 변환됩니다:

content: "I am fnord.";

주의하세요. LESS에서 변수는 실질적으로 ‘상수(constants)&rsquo라고 할 수 있습니다; 왜냐하면 한 번만 정의할 수 있기 때문입니다.

믹스인

LESS에서는 하나의 룰셋에서 속성을 여러 개 취해서 다른 룰셋에 포함시키는 것이 가능합니다. 예를 들어, 다음과 같은 클래스를 갖고 있다고 해 봅시다 :

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

이 속성들을 다른 룰셋에서 사용하려고 합니다. 자, 포함시키려는 속성이 들어있는 룰셋에다가 클래스의 이름을 집어넣기만 하면 됩니다:

#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

.bordered클래스의 속성(요부분 맞는지 몰겠어요 --a)이 두 군데에 나타납니다. #menu a하고 .post a안에 나타나요:

#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

CSS class나 id 룰렛은 이런 방식으로 믹스인할 수 있습니다.

인자를 갖는 믹스인

LESS에는 특별한 유형의 룰셋이 있습니다. 이것은 클래스처럼 mix in 할 수 있고, 인자를 넘겨받습니다. 다음은 고전적인 예입니다 :

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

다음은 이것을 다양한 룰셋으로 믹스하는 방법입니다:

#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

인자를 갖는 믹스인은 인자의 디폴트 값을 가질 수도 있습니다:

.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

이제 이것을 호출하려면 다음과 같이 하세요:

#header {
.border-radius;
}

그러면 5px의 border-radius를 포함합니다.

인자를 갖는 믹스인인데 인자를 넘겨받지 않는 믹스인을 쓸 수도 있습니다. 이것은 CSS 결과물에서 룰셋을 숨기되, CSS 결과물의 속성을 다른 룰셋에다가 포함시켜야할 때 유용합니다.

.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

pre { .wrap }

다음과 같이 만들어냅니다:

pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

@arguments 변수에 대해서

@arguments는 믹스인 안에서 특별한 의미가 있습니다. 믹스인을 호출할 때, @arguments는 넘겨받은 인자를 모두 가지고 있습니다. 인자들을 개별적으로 다루는 경우가 아니라면, 매우 유용합니다.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

결과는 다음과 같습니다:

box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

패턴매칭(Pattern-matching)과 가드 표현식(Guard expressions)

때로는 여러분이 넘겨주는 인자에 따라 믹스인이 다르게 행동하도록 하고 싶을 수도 있습니다. 간단한 예를 살펴 봅시다:

.mixin (@s, @color) { ... }

.class {
.mixin(@switch, #888);
}

이제는, .mixin이 @switch에 따라서 다른 행동을 하고 싶은 상황에 대해 살펴 봅시다. .mixin을 다음처럼 정의하면 돼요 :

.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}

자, 이제 실행을 하면:

@switch: light;

.class {
.mixin(@switch, #888);
}

다음의 CSS를 얻습니다:

.class {
color: #a2a2a2;
display: block;
}

.mixin에 색상을 넘겨준 곳에는, 색상이 밝아졌습니다. @switch의 값이 dark인 경우에는 색상이 어두워졌습니다.

아래에는 결과가 나옵니다:

첫번째 믹스인 정의는 들어맞지 않습니다. 왜냐하면 첫번째 인자로 dark가 올거라고 예상했기 때문입니다.
두번째 정의는 들어맞습니다. 왜냐하면 인자로 light가 올거라고 예상했기 때문입니다.
세번째 정의는 들어맞습니다. 왜냐하면 어떤 값이 인자로 와도 상관없기 때문입니다.

들어맞는 믹스인 정의만 사용됩니다. 변수가 들어맞으면, 값이 무엇인지에 관계없이 연결(bind)됩니다. 변수가 아닌 경우에는, 자신과 똑같은 것 하고만 들어맞습니다.

인자의 개수에 대해서도 들어맞는지 확인할(match) 수 있습니다. 다음 예를 보시죠:

.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}

이제, .mixin을 인자 하나로 호출하면, 위쪽 선언의 출력을 얻습니다. 그러나 두 개의인자를 넘겨주면, 아래쪽 선언을 부릅니다. 즉 @a에서 @b로 변하는(fade) 색을 얻을 수 있습니다 .

가드(Guards)

단순히 값이나 인자의 개수(arity)가 아니라, 표현식(expression)과 일치하는 것을 찾을 때에, 가드가 유용합니다. 함수형 프로그래밍이 익숙하시다면, 가드라는 개념을 이미 아실 겁니다.

In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mixins instead of if/else statements, in the vein of @media query feature specifications.

Let’s start with an example:

.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}

The key is the when keyword, which introduces a guard sequence (here with only one guard). Now if we run the following code:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

다음의 결과를 얻을 겁니다:

.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}

다음은 가드(guards)안에서 사용할 수 있는 비교 연산자를 모두 나열한 것입니다. > >= = =< <. 또한 true 키워드는 유일하게 truthy한 값입니다. 그리고 이 키워드는 두 개의 믹스인을 같게 만듭니다:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

Any value other than the keyword true is falsy:

.class {
.truth(40); // Will not match any of the above definitions.
}

Guards can be separated with a comma ‘,’—if any of the guards evaluates to true, it’s considered as a match:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

기억하세요 - 인자를 다른 인자하고 비교할 수도 있고, 인자가 아닌 것과 인자를 비교할 수도 있습니다:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

마지막으로, 값의 자료형에 따라 믹스인을 찾으려면, is*함수를 사용하세요:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

다음은 자료형을 검사하는 기본적인 함수입니다:

iscolor
isnumber
isstring
iskeyword
isurl

어떤 값이 수일 때, 이 수가 특정 단위로 쓰였는지 알려고 할 때에는 다음 중 하나를 사용하세요:

ispixel
ispercentage
isem

마지막으로 - 마지막이라고 해서 안 중요한 건 아닙니다 - 가드 안에 조건을 추가하려면 and키워드를 사용하세요:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

그리고 무엇이 아닐 때,처럼 조건을 부정하려면 not 키워드를 써 주세요:

.mixin (@b) when not (@b > 0) { ... }

중첩에 관한 규칙

LESS를 사용하면 캐스캐이딩 방식으로 결합하는 방식 대신에 중첩하는 방식을 사용할 수 있습니다. CSS가 다음과 같은 상황을 살펴 보죠:

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}

LESS를 사용하면 다음처럼 쓸 수도 있습니다:

#header {
color: black;

.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}

아니면 이렇게 쓸 수도 있습니다:

#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}

The resulting code is more concise, and mimics the structure of your DOM tree.

Notice the & combinator—it’s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like :hover and :focus.

예를 들어:

.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}

다음의 결과가 나옵니다.

.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}

연산

수나 색상, 변수를 연산할 수 있습니다. 몇 가지 예를 살펴 보시죠:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

이렇게 연산한 결과는 여러분이 기대하는 것과 매우 비슷할 겁니다. LESS에서는 16진수 색상값(color)과 단위를 서로 다르게 인식합니다. 단위를 연산하는 경우에 :

@var: 1px + 5;

LESS는 단위를 인식해서 결과에 반영합니다. 이번 예에서는 6px이 되고요.

Brackets are also authorized in operations:

width: (@var + 5) * 2;

And are required in compound values:

border: (@width * 2) solid black;

색상에 관한 함수

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

수학 관련 함수

LESS에서는 수를 다루는 편리한 수학 관련 함수를 제공합니다:

round(1.67); // `2`를 반환합니다.
ceil(2.4); // `3`을 반환합니다.
floor(2.6); // `2`를 반환합니다.

어떤 값을 퍼센트로 전환할 때에는, percentage 함수를 사용하세요:

percentage(0.5); // `50%`를 반환합니다.

네임 스페이스 (Namespaces)

가끔은 팀(의 목적)을 위해, 또는 몇몇 캡슐화된 소스를 제공하기 위해, 변수나 믹스인을 그룹으로 묶고 싶을 수 있습니다. LESS 에서는 매우 직관적인 방법으로 변수나 믹스인을 그룹으로 묶을 수 있습니다. - 나중에 재사용을 하거나, 배포하기 위해서, 그룹으로 묶고 싶은 몇몇 믹스인과 변수들을 #bundle 안에 넣으세요.

#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}

.button클래스를 #header a 안에서 믹스인하려면, 다음과 같이 하면 됩니다:

#header a {
color: orange;
#bundle > .button;
}

유효범위(Scope)

LESS에 나오는 범위(Scope)는 프로그래밍 언어의 범위하고도 비슷하다. 컴파일러는 우선은 로컬에서 변수와 mixins를 찾아보고, 없으면 부모의 범위에서 찾는 식으로 진행된다. 등등

@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}

#footer {
color: @var; // 빨간색
}

주석달기

CSS 스타일의 주석은 LESS 에서 유지됩니다.:

/* 안녕하세요, 나는 CSS-스타일 주석이에요. */
.class { color: black }

LESS 에서는 한줄짜리 주석도 유효하지만, CSS로 컴파일된 결과에는 한줄짜리 주석이 포함되지 않습니다:

// 안녕하세요, 나는 안 보이는 주석이에요. 나는 CSS 에서 보이지 않아요.
.class { color: white }

파일 불러들이기(Importing)

메인 .less 파일 안에서 다른 .less 파일들과, 모든 변수들, 믹스인들을 불러들여 사용할 수 있습니다. .less 확장자는 선택사항이라서 아래 두 가지 형태 모두 사용 가능합니다:

@import "lib.less";
@import "lib";

만약에 LESS가 처리하지 않고 CSS 파일 자체를 불러오고 싶다면, 그냥 .css 확장자를 사용하세요.

@import "lib.css";

이렇게 불러들이면 CSS 파일을 아무 변환 없이 그대로 불러들여 보여주게 됩니다.

문자열 치환

Ruby 또는 PHP와 비슷한 방법으로 문자열 안에 변수값들을 치환시킬 수 있습니다. @{변수명}을 이용하면 되는데요, 아래의 예를 참고해 보세요:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

이스케이핑 (Escaping)

가끔씩은 유효하지 않은 CSS 문법을 사용한다거나 LESS에서 인식하지 못하는 고유의 문법을 사용한 CSS 값을 출력해야 할 경우가 있습니다.

그런 값들을 나타내려면 ~ 기호를 앞에 붙여줍니다. 예를 들자면 이런 거죠:

.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

이것을 가리켜 “이스케이핑” 이라 부릅니다. 위의 예는 아래와 같은 결과를 보여줍니다:

.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

자바스크립트 표현식 인식하기

.less 파일 안에서 자바스크립트 표현식들을 변수값으로 인식하게 할 수 있습니다. 이것은 백틱 기호 (`)로 자바스크립트 표현식을 둘러싸면 됩니다.

@var: `"hello".toUpperCase() + '!'`;

위 표현은 아래와 같이 됩니다:

@var: "HELLO!";

문자열을 치환자 ({ } 로 둘러싸기 - 역자 주)와 이스케이프 기호 (~ 기호 - 역자 주)를 써서 바꿀 수도 있습니다.

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

위 표현은 아래와 같이 됩니다:

@var: HELLO!;

또한 자바스크립트 속성값에 직접 접근할 수도 있습니다:

@height: `document.body.clientHeight`;

만약 자바스크립트 문자열을 HEX 색상값으로 변환시키고 싶다면 color 함수를 쓰면 됩니다:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

다른 언어로 보기

러시아어: http://lesscss.ru
중국어: http://lesscss.net
일본어: http://less-ja.studiomohawk.com/
벨라루스어: http://www.designcontest.com/show/lesscss-be

About

LESS는 Alexis Sellier가 개발했습니다. 그는 cloudhead라는 닉네임으로 좀 더 널리 알려져 있습니다.