스타일러스 (스타일시트 언어)
보이기
설계자 | TJ Holowaychuk |
---|---|
개발자 | LearnBoost (2011년 3월 29일[1] | - 2015년 3월 26일 ) / Automattic (2015년 3월 26일 - 현재)
발표일 | 2010년 |
최근 버전 | 0.53.0[2] |
최근 버전 출시일 | 2015년 12월 14일[3] |
자료형 체계 | 동적 |
운영 체제 | 크로스 플랫폼 |
라이선스 | MIT 라이선스 |
웹사이트 | Stylus |
영향을 받은 언어 | |
CSS, Sass, LESS |
스타일러스(Stylus)는 종속형 시트(CSS)로 컴파일되는 동적 스타일시트 전처리기 언어이다. 설계는 Sass와 LESS의 영향을 받았다. 4번째로 많이 쓰이는 CSS 전치리기 문법으로 간주된다.[4] Node.js의 이전 프로그래머이자 루나(Luna) 언어의 개발자 TJ Holowaychuk에 의해 개발되었다. JADE와 Node.js로 작성되었다.
셀렉터
[편집]괄호를 사용하여 선언 블록을 열고 닫는 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
각주
[편집]- ↑ “LICENSE”. 《GitHub》. 2015년 3월 26일. 2015년 12월 21일에 확인함.
- ↑ “Release 0.53.0”. 《GitHub》. 2015년 12월 14일. 2015년 12월 21일에 확인함.
- ↑ “History”. 《GitHub》. 2015년 12월 21일. 2015년 12월 21일에 확인함.
- ↑ Poll Results: Popularity of CSS Preprocessors
외부 링크
[편집]이 글은 소프트웨어에 관한 토막글입니다. 여러분의 지식으로 알차게 문서를 완성해 갑시다. |