Mustache :{

moon indicating dark mode
sun indicating light mode

sass & scss

...

December 17, 2011

oops.scss 파일을 아래처럼 맨들고,

@import "compass/css3";
#header,
#footer {
  margin: 0 auto;
}
.error {
  @include border-radius(5px);
  background-color: #dd0000;
  .important {
    border-width: 3px;
  }
}

콤퓨타로 뭔가를 하면,

$ sass --watch oops.scss:oops.css
or
$ compass watch /path/to/     # 끝판왕임 저는 이렇게 씀
or
# emacs scss-mode 쓰면 그냥 저장함과 동시에 변환할 수 있는데 compass
# 의 기능은 사용할 수 없음

oops.css 파일을 맨들어 줍니다.

/* line 2, ../sass/oops.scss */
#header,
#footer {
  margin: 0 auto;
}
/* line 5, ../sass/oops.scss */
.error {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background-color: #dd0000;
}
/* line 8, ../sass/oops.scss */
.error .important {
  border-width: 3px;
}

이처럼 sass는 .sass 또는 .scss를 .css로 맨들어 줍니다.

장점으로는 oops.scss에서 @include border-radius(5px); 를 보듯이 함수와 변수를 사용할 수 있다는 것입니다. 코드의 중복을 막아주고(Don’t Repeat Yourself), 셀렉터들의 계층을 두어서 쉽게 작성할 수 있습니다. compass를 함께 사용하면 이미 흔하게 사용되고 있는 선조들의 best practice를 import 해서 쓸 수 있습니다.

설치 및 사용

$ gem install sass compass    # 저는 compass도 씀
$ compass create /path/to/Your-Awesome-Project/
# config.rb 를 수정하고, stylesheets, sass, images 등의 경로를
# 프로젝트 환경에 맞게 바꿔줍니다. rails 라면 필요없어 보입니다.
$ compass watch .    # config.rb 있는 곳을 지정해 줘야 합니다.
# scss 파일을 수정하면 css 파일에도 반영됩니다.

저는 config.rb 를 다음과 같이 변경해서 사용중입니다.

http_path = "/"
css_dir = "static/css"
sass_dir = "static/sass"
images_dir = "static/images"
javascripts_dir = "static/scripts"

그밖에..

emacs scss-mode를 사용하면 watcher 를 띄우지 않고도 저장과 동시에 css파일을 맨들 수 있습니다.

(add-to-list 'load-path "~/.emacs.d/vendor/scss-mode")
(require 'scss-mode)

blueprint와 같은 grid framework 와 함께 사용할 수 있습니다. 저는 그렇게 쓰고 있습니다.

octopress 도 scss사용합니다.

결론

ruby 모듈이자 툴입니다. 저희 회사는 perl로 개발합니다만 물론 사용할 수 있습니다. 너무나도 훌륭한 오픈소스 입니다.

훌륭한 개발환경을 가지고 있고, 프로그래밍에는 능숙하지만, css만 잡으면 한없이 약해지는 분들이라면 간단한 scss문법을 공부하고 compass툴 사용법을 익혀서 써먹으면 좋을 것 같습니다.