Mustache :{

use perl

Sass & Scss

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

oops.scss
1
2
3
4
5
6
7
8
9
10
11
@import "compass/css3";
#header,#footer {
    margin: 0 auto;
}
.error {
    @include border-radius(5px);
    background-color: #DD0000;
    .important {
        border-width: 3px;
    }
}

콤퓨타로 뭔가를 하면,

1
2
3
4
5
6
7
8
9
10
$ sass --watch oops.scss:oops.css

or

$ compass watch /path/to/     # 끝판왕임 저는 이렇게 씀

or

# emacs scss-mode 쓰면 그냥 저장함과 동시에 변환할 수 있는데 compass
# 의 기능은 사용할 수 없음

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

oops.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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 practiceimport 해서 쓸 수 있습니다.

설치 및 사용

1
2
3
4
5
6
$ 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 를 다음과 같이 변경해서 사용중입니다.

config.rb
1
2
3
4
5
http_path = "/"
css_dir = "static/css"
sass_dir = "static/sass"
images_dir = "static/images"
javascripts_dir = "static/scripts"

그밖에..

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

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

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

octopressscss사용합니다.

결론

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

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

Comments