{{위키데이터 속성 추적}}
{{프로그래밍 언어 정보
| 이름                   = Stylus
| 로고                   = Stylus-logo.svg
| released               = {{시작 날짜와 나이|2010}}
| 설계자               = TJ Holowaychuk
| 개발자              = LearnBoost ({{시작 날짜|2011|03|29}} - {{시작 날짜|2015|03|26}}) / Automattic ({{시작 날짜|2015|03|26}} - 현재)<ref>{{웹 인용|url=https://github.com/stylus/stylus/blob/c2d07a0f117de6144105de8599f620c34713d251/LICENSE|title=LICENSE|work=GitHub|date=2015-03-26|accessdate=2015-12-21}}</ref>
| 최근 버전 = 0.53.0<ref>{{웹 인용|url=https://github.com/stylus/stylus/releases/tag/0.53.0|title=Release 0.53.0|work=GitHub|date=2015-12-14|accessdate=2015-12-21}}</ref>
| 최근 버전 출시일    = {{시작 날짜와 나이|2015|12|14}}<ref name="history">{{웹 인용|url=https://github.com/stylus/stylus/blob/dev/History.md|title=History|work=GitHub|date=2015-12-21|accessdate=2015-12-21}}</ref>
| 형 체계                 = [[자료형 체계|동적]]
| 영향을 받은 언어          = [[CSS]], [[Sass (스타일시트 언어)|Sass]], [[Less (스타일시트 언어)|LESS]]
| 영향을 준 언어             = 
| 운영 체제       = [[크로스 플랫폼]]
| 라이선스                = [[MIT 라이선스]]
| 웹사이트                = [http://stylus-lang.com Stylus]
}}
'''스타일러스'''(Stylus)는 [[종속형 시트]](CSS)로 컴파일되는 동적 스타일시트 [[전처리기]] 언어이다. 설계는 [[Sass]]와 [[LESS]]의 영향을 받았다. 4번째로 많이 쓰이는 CSS 전치리기 문법으로 간주된다.<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref> [[Node.js]]의 이전 프로그래머이자 루나(Luna) 언어의 개발자 TJ Holowaychuk에 의해 개발되었다. [[JADE]]와 [[Node.js]]로 작성되었다.

== 셀렉터 ==
괄호를 사용하여 선언 블록을 열고 닫는 CSS와 달리 들여쓰기가 사용된다. 게다가 세미콜론(;)은 선택적으로 제외된다. 그러므로 다음의 CSS는:
<syntaxhighlight lang="css">
body {
    color: white;
}
</syntaxhighlight>
다음으로 줄일 수 있다:
<syntaxhighlight lang="css">
body
    color: white
</syntaxhighlight>
게다가 콜론(:)과 쉼표(,)는 또한 선택사항이므로 위는 다음과 같이 쓸 수 있다:
<syntaxhighlight lang="css">
body
    color white
</syntaxhighlight>

== 변수 ==
스타일러스는 변수 정의를 허용하지만 LESS와 Saas와 달리 변수 정의를 위해 심볼을 사용하지 않는다. 게다가 변수 할당은 속성과 키워드를 분리시킴으로써 자동으로 수행된다. 이러한 방식으로 변수는 [[파이썬]]의 변수와 비슷하다.
<syntaxhighlight lang="css">
message = 'Hello, World!'

div::before
  content message
  color #ffffff

</syntaxhighlight>

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

<syntaxhighlight lang="css">
div::before {
  content: 'Hello, World!';
  color: #ffffff;
}
</syntaxhighlight>

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

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

<syntaxhighlight lang="css">
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n
</syntaxhighlight>

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

<syntaxhighlight lang="css">
div.rectangle
  border-radius(10px)
</syntaxhighlight>

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

<syntaxhighlight lang="css">
div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
</syntaxhighlight>

== 보간 ==
인수와 식별자에 변수를 포함시키려면 괄호 문자를 변수에 감싸면 된다. 이를테면 <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight>는 다음으로 평가된다:<syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight>

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

== 외부 링크 ==
* {{공식 웹사이트}}
* [https://github.com/stylus/stylus Stylus source code repository (Git)]
* [https://github.com/stylus/stylus/blob/master/docs/compare.md Source code comparison with Sass/SCSS and LESS]

{{토막글|소프트웨어}}

[[분류:스타일시트 언어]]
[[분류:MIT 라이선스 소프트웨어]]
[[분류:자유 라이브러리]]