Blueprint에 대한 포스팅에서 CSS 프레임워크에 대해서 이야기 하면서 컴파일을 통해서 CSS를 생성할 수 있는 Sass나 LESS에 대해서 얘기했었습니다. 이 포스팅에서 설명할 Stylus를 포함해서 3가지 다 비슷한 형태로 표현적이로 간결한 문법을 사용해서 CSS를 작성하고 이를 컴파일해서 일반적으로 보는 CSS형태로 만들어줍니다.

작성은 매우 편리하게 할 수 있도록 제공해 주지만 사전에 컴파일을 해야 사용가능하다는 점이 번거로운 작업입니다. 분위기상은 Sass가 가장 오래되었고 Ruby진영에서 많이 쓰이고 있는듯 하고 LESS는 node.js를 이용해서 컴파일이 가능하며 다른 것들과 다르게 js형태로도 컴파일을 제공하고 있기 때문에 프론트앤드에서도 사용할 수 있습니다.(물론 성능이슈가 있을것이기 때문에 서비스에서는 컴파일된 파일을 사용해야겠지만요.) 여기서 사용할 Stylus도 node.js에서 사용가능한 CSS pre-processor입니다. 일반적으로 LESS가 가장 인기가 있고 node.js에서 사용할 수 있지만 Stylus를 선택한 이유는 웹프레임워크인 express를 만든 LearnBoost의 TJ Holowaychuk가 Stylus를 만들었기 때문입니다.(궁합이 좀더 좋겠지 하는 기분?)




Stylus 설정하기


express에서 사용할 것이므로 이전에 포스팅한 것처럼 express는 설치되어 있어야 하고 NPM을 통해 위와 같이 명령어로 간단히 설치할 수 있습니다.

app.configure(function(){
   app.use(require('stylus').middleware({ src: __dirname + '/public' }));
});

이렇게 설치한 후에 express의 설정에서 위와 같이 configure에 stylus를 사용하도록 추가해 주어야 합니다.(물론 기본적으로 다른 configure들이 설정되어 있는데 2번라인을 추가하는 것입니다.) src에 설정하는 부분은 컴파일할 Stylus파일들이 있는 경로를 지정합니다. 일반적으로 /public/stylesheets 아래에 .css를 두는 것이 일반적이므로 설정한 경로 하위는 모두 처리해주는 것으로 보입니다.

Stylus의 파일확장자는 .styl이고 express에서 사용할 경우 자동으로 css파일로 컴파일해 줍니다. 예를 들어 style.styl을 만들어두면 페이지 로딩시 자동으로 같은 위치에 style.css를 컴파일해서 동적으로 만들어줍니다. 때문에 페이지는 style.css를 인클루드해놓으면 되고 동적으로 갱신해주기 때문에 style.styl파일을 계속 수정하면서 서버를 새로 띄울 필요없이 바로바로 갱신된 CSS를 사용할 수 있습니다.

CSS pre-processor의 경우 컴파일과정을 거쳐야 한다는게 강력하고 간결한 문법을 사용한다는 장점을 무색하게 만드는게 아닌가 생각하고 특히 계속해서 페이지를 확인하면서 작업해야 하는 CSS를 매번 컴파일 해줘야 한다는 점은 무척 불편한 일이라고 생각하는데 express에서 자동으로 컴파일을 해주는건 편리한 점이라고 생각합니다.(물론 express에서는 LESS와 Sass도 지원하고 있습니다.) 서버쪽 개발환경을 구축하고 있지 않은 퍼블리셔들의 경우에는 js로 동적으로 확인할 수 있도록 제공하는 LESS가 큰 매력이 있으리라고 생각합니다.(node.js설치해서 사용하세요 하는 건 좀 무리가 아닐까 하는 생각이....)


express를 사용하지 않아도 아래와 같은 명령어로 컴파일 할 수 있습니다.


-o 옵션은 Stylus파일을 css로 컴파일 해주면 넘겨준 디렉토리에 컴파일한 파일을 두게 됩니다. -c 옵션을 사용할 경우는 압축한 css의 형태로 컴파일 해줍니다.


이 명령어를 사용하면 기존의 CSS파일을 Stylus파일로 변환해 줄 수 있습니다.




Stylus 사용하기
사용법은 상당히 간단하기 때문에 Stylus문서를 보면 금새 사용법을 알 수 있습니다. 저도 사용하기 시작한지 얼마 안되었고 많은 기능을 일일이 다 설명할 수는 없기 때문에 간단히만 설명하겠습니다.


코딩 스타일

body
   font 14px "Lucida Grande", Helvetica, Arial, sans-serif
   background-color #efeeee

Stylus는 중괄호({})와 세미콜론(;)과 콜론(:)을 생략할 수 있습니다. 큰건 아니지만 CSS를 작성할 때 매번 입력해야하는 귀찮은 타이핑이로 빠뜨릴 때마다 고쳐줘야 하는데 막상 작업을 해보니 생각보다 편리합니다.(물론 옵션이므로 필요하면 사용해도 상관없습니다.) Stylus은 들여쓰기로 블락을 판단하기 때문에 위와같이 들여쓰기는 지켜주어야 합니다. 이것을 컴파일 하면 아래처럼 나옵니다.

body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #efeeee;
}

a
  color #00678f
  &:hover
  &:focus
    color #be2a2a

&문자는 부모의 셀렉터를 참조합니다.(여기서는 a) 때문에 위와같이 &를 사용해서 내부에서 다시 추가적인 정의를 해줄수 있습니다. &:hover, &:focus 와 같이 콤마로 연결하거나 위와같이 여러줄에 적어주어도 됩니다. 컴파일하면 아래와 같이 됩니다

a {
  color: #00678f;
}
a:hover,
a:focus {
  color: #be2a2a;
}

변수 사용

DARKGREY_COLOR = #424242
// 헤더
header
   background-color DARKGREY_COLOR

CSS를 사용하다보면 페이지내에서 같은 칼라를 다양한 곳에서 사용하게 되는데 위와같이 변수를 사용할 수 있기 때문에 전체적으로 변경할때 쉽게 바꿀 수 있습니다.(제가 구분을 하려고 상수처럼 대분자로 썼을뿐 꼭 대문자로 써야하는 것은 아닙니다.) 주석은 //로 사용하고(/* */와 같은 여러라인의 사용할수 있는 주석도 됩니다.) css파일에서는 나오지 않습니다. 컴파일하면 아래처럼 나옵니다.

header {
  background-color: #424242;
}

함수 사용

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  -o-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)
   
div
  border-radius 5px 

함수를 지원하기 때문에 위와 같이 작성할 수 있습니다. 그리고 넘겨받은 변수를 {}를 사용해서 표현식에 적어줄 수 있기 때문에 vondor라는 함수처럼 정의해서 공용으로 사용할 수 있으며 border-radius 5px는 border-radius(5px)와 같이 적어줄 수도 있습니다. arguments는 파라미터를 모두 받기 때문에 '함수명 2px 3px 4px'처럼 사용하면 arguments위치에 넘긴 모든 파라미터가 들어가게 됩니다. 컴파일하면 아래와 같이 나옵니다.

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Conclusion
Stylus를 사용해 보고 있는데 아주 만족스럽습니다. 개인적으로 하는 코딩해서 HTML로 프로토타이핑을 하고 있는데 CSS의 특성상 비슷한 스타일이 여러곳에서 사용되고 재사용할 수 있는 방안도 없는데 Stylus를 사용할 경우 재사용할 수 있는 형태로 변수나 함수를 정의해서 사용할 수 있기 때문에 코드도 간단해 지고 좀 더 빠르게 작성할 수 있는 느낌입니다. 써보진 않았지만 거의 비슷하리라 생각되는 SASS나 LESS도 충분한 만족도를 줄 것이라고 생각합니다. 참고로 TJ Holowaychuk가 올린 SASS, LESS, Sylus의 오류보고 비교도 참고해 보시면 좋을듯 합니다.