{{위키데이터 속성 추적}}
{{프로그래밍 언어 정보
| 이름                   = Less
| 로고                   = LESS Logo.svg
| released =  {{시작 날짜와 나이|{{wikidata|property|Q1107192|P571}}}}
| 설계자                 = Alexis Sellier
| 개발자                 = Alexis Sellier, Dmitry Fadeyev
| 프로그래밍 언어         = [[자바스크립트]]
| latest release version = {{wikidata|property|preferred|references|edit|Q1107192|P348|P548=Q2804309}}
| latest release date = {{시작 날짜와 나이|{{wikidata|qualifier|preferred|single|Q1107192|P348|P548=Q2804309|P577}}}}
| 형 체계                = [[자료형 체계|동적]]
| 영향을 받은 언어        = [[종속형 시트]], [[Sass (스타일시트 언어)|Sass]]
| 영향을 준 언어          = [[Sass (스타일시트 언어)|Sass]], Less 프레임워크, [[부트스트랩]]
| 운영 체제              = [[크로스 플랫폼]]
| 라이선스                = [[아파치 라이선스]] 2
| 웹사이트                = {{URL|lesscss.org}}
}}
'''Less'''(Leaner Style Sheets, '''LESS''', 레스)는 [[종속형 시트]](CSS)로 컴파일한 다음 클라이언트 사이드나 서버 사이드에서 실행할 수 있는 동적 [[전처리기]] [[스타일시트 언어]]이다.<ref name="main">[http://lesscss.org/ Official Less website] Official Less website</ref> Alexis Sellier가 설계한 Less는 [[Sass (스타일시트 언어)|Sass]]의 영향을 받았으며 CSS와 같은 블록 서식 문법을 채택한 Sass의 더 새로운 "SCSS" 문법에 영향을 주었다.<ref name="compare">[http://nex-3.com/posts/83-sass-and-less Sass and Less] {{webarchive|url=https://web.archive.org/web/20090621074106/http://nex-3.com/posts/83-sass-and-less |date=2009-06-21 }} Sass and Less</ref> Less는 [[오픈 소스 소프트웨어|오픈 소스]]이다. 최초 버전은 [[루비 (프로그래밍 언어)|루비]]로 작성되었다. 그러나 이후 버전에서 루비 사용이 구식 처리되어 [[자바스크립트]]로 변경되었다. Less의 들여쓰기 문법은 [[메타 언어|네스티드(nested)된 메타언어]]이며 유효한 CSS는 동일한 시맨틱스를 갖는 유효한 Less 코드이다. Less는 다음의 매커니즘을 제공한다: [[변수 (컴퓨터 과학)|변수]], 네스팅(nesting), [[mixin]], [[연산자]], [[함수]]. Less와 그 밖의 CSS 전처리기와의 주된 차이점의 경우 Less는 브라우저에 의해 less.js를 통해 실시간 컴파일을 허용한다는 것이다.<ref name="main" /><ref name = "no-sass-js">{{웹 인용|url=https://stackoverflow.com/questions/4436643/is-there-a-sass-js-something-like-less-js|title=css - Is there a SASS.js? Something like LESS.js?|work=Stack Overflow}}</ref>

== 변수 ==
'''Less'''는 변수 정의를 허용한다. Less의 변수는 [[골뱅이표]](@)로 정의된다. 변수 할당은 [[콜론]](:)을 통해 이루어진다.

변환 중에 변수의 값들은 출력 CSS 문서에 삽입된다.<ref name="main" />

<syntaxhighlight lang="less">
@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}
</syntaxhighlight>

상기의 Less 코드는 다음의 CSS 코드로 컴파일된다.
<syntaxhighlight lang="css">
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
</syntaxhighlight>

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

<syntaxhighlight lang="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);
}
</syntaxhighlight>

위의 Less 코드는 다음의 CSS 코드로 컴파일된다:
<syntaxhighlight lang="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;
}
</syntaxhighlight>

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

<syntaxhighlight lang="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;
      }
    }
  }
}
</syntaxhighlight>

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

<syntaxhighlight lang="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;
}
</syntaxhighlight>

== 같이 보기 ==
* [[Sass (스타일시트 언어)]]

== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트}}
* [https://github.com/less/less.js Less source code repository (Git)]
* [https://github.com/csshat/lesshat LESS Hat mixins library]
* [https://github.com/hapztron/sai Sai the mixins extension and CSS authoring framework for LESS & SASS/SCSS (Git) ]

[[분류:자바스크립트 라이브러리]]
[[분류:아파치 라이선스 소프트웨어]]
[[분류:스타일시트 언어]]
[[분류:자유 라이브러리]]