스타일러스 (스타일시트 언어)

스타일러스(Stylus)는 종속형 시트(CSS)로 컴파일되는 동적 스타일시트 전처리기 언어이다. 설계는 Sass와 LESS의 영향을 받았다. 4번째로 많이 쓰이는 CSS 전치리기 문법으로 간주된다. Node.js의 이전 프로그래머이자 루나(Luna) 언어의 개발자 TJ Holowaychuk에 의해 개발되었다. JADE와 Node.js로 작성되었다.

Stylus

설계자	TJ Holowaychuk
개발자	LearnBoost (2011년 3월 29일 (2011-03-29) - 2015년 3월 26일 (2015-03-26)) / Automattic (2015년 3월 26일 (2015-03-26) - 현재)
발표일	2010년(2010)
최근 버전	0.53.0
최근 버전 출시일	2015년 12월 14일(2015-12-14)
자료형 체계	동적
운영 체제	크로스 플랫폼
라이선스	MIT 라이선스
웹사이트	Stylus
영향을 받은 언어
CSS, Sass, LESS

셀렉터

괄호를 사용하여 선언 블록을 열고 닫는 CSS와 달리 들여쓰기가 사용된다. 게다가 세미콜론(;)은 선택적으로 제외된다. 그러므로 다음의 CSS는:

body {
    color: white;
}

다음으로 줄일 수 있다:

body
    color: white

게다가 콜론(:)과 쉼표(,)는 또한 선택사항이므로 위는 다음과 같이 쓸 수 있다:

body
    color white

변수

스타일러스는 변수 정의를 허용하지만 LESS와 Saas와 달리 변수 정의를 위해 심볼을 사용하지 않는다. 게다가 변수 할당은 속성과 키워드를 분리시킴으로써 자동으로 수행된다. 이러한 방식으로 변수는 파이썬의 변수와 비슷하다.

message = 'Hello, World!'

div::before
  content message
  color #ffffff

스타일러스 컴파일러는 위의 문을 다음과 같이 번역한다:

div::before {
  content: 'Hello, World!';
  color: #ffffff;
}

Mixin과 함수

mixin과 함수들은 동일한 방식으로 정의되지만 다른 방식으로 적용된다.

이를테면 다양한 벤더 두문자를 사용하지 않고 CSS 테두리 직경 속성을 정의하고 싶으면 다음을 만들 수 있다:

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

이를 mixin으로 포함시키면 다음과 같이 참조된다:

div.rectangle
  border-radius(10px)

이것을 컴파일하면 다음의 결과가 나온다:

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

보간

인수와 식별자에 변수를 포함시키려면 괄호 문자를 변수에 감싸면 된다. 이를테면

 -webkit-{'border' + '-radius'}

는 다음으로 평가된다:

-webkit-border-radius

외부 링크

• 스타일러스 - 공식 웹사이트
• Stylus source code repository (Git)
• Source code comparison with Sass/SCSS and LESS