Less (스타일시트 언어)

Less
설계자	Alexis Sellier
개발자	Alexis Sellier, Dmitry Fadeyev
발표일	2009년(15년 전)
최근 버전	4.2.0
최근 버전 출시일	2023년 9월 7일(6개월 전)
자료형 체계	동적
구현 언어	자바스크립트
운영 체제	크로스 플랫폼
라이선스	아파치 라이선스 2
웹사이트	lesscss.org
영향을 받은 언어
	종속형 시트, Sass
영향을 준 언어
	Sass, Less 프레임워크, 부트스트랩

Less(Leaner Style Sheets, LESS, 레스)는 종속형 시트(CSS)로 컴파일한 다음 클라이언트 사이드나 서버 사이드에서 실행할 수 있는 동적 전처리기 스타일시트 언어이다.^[2] Alexis Sellier가 설계한 Less는 Sass의 영향을 받았으며 CSS와 같은 블록 서식 문법을 채택한 Sass의 더 새로운 "SCSS" 문법에 영향을 주었다.^[3] Less는 오픈 소스이다. 최초 버전은 루비로 작성되었다. 그러나 이후 버전에서 루비 사용이 구식 처리되어 자바스크립트로 변경되었다. Less의 들여쓰기 문법은 네스티드(nested)된 메타언어이며 유효한 CSS는 동일한 시맨틱스를 갖는 유효한 Less 코드이다. Less는 다음의 매커니즘을 제공한다: 변수, 네스팅(nesting), mixin, 연산자, 함수. Less와 그 밖의 CSS 전처리기와의 주된 차이점의 경우 Less는 브라우저에 의해 less.js를 통해 실시간 컴파일을 허용한다는 것이다.^[2]^[4]

변수 편집

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

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

@pale-green-color: #4D926F;

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

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

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

믹스인 편집

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

.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 코드로 컴파일된다:

#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)이 있어서 클래스처럼 믹스가 가능하지만 파라미터를 수락한다.

#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 코드로 컴파일된다:

#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;
}