http://sass-lang.com/

http://mygony.com/archives/3667

SASS 가 유명해진건 꽤 오래됐지만, 

실제로 CSS 파일을 생산하는 과정에서 사용하는 분들은 주변에선 많이 보지 못했습니다.

가장 큰 문제는 컴파일 과정입니다.

sass --watch 옵션을 쓴다고 해도 FTP 로 원격작업을 한다거나 하는 경우에는 제대로 파일을 검토를 못하고 만약

include 구조를 쓴다면 더욱 애매해집니다. 

그래서 추천하는것은 inotify 와 함께 연계하는겁니다. 

inotify 에 대한 설명은 뭐 구글링 해보시면되고, 다짜고짜 코드부터 제시해본다면

#!/bin/sh

inotifywait -mr --timefmt '%d/%m/%y %H:%M' --format '%T %w %f' \
-e close_write /home/anizone/public_html_new/sass | while read date time dir file; do

       sass /home/anizone/public_html_new/sass/main.scss:/home/anizone/public_html_new/css/compile.css --style compressed

done

이런식의 쉘 스크립트를 짜서 돌리게되면

/home/anizone/public_html_new/sass 폴더 아래의 모든 갱신이 일어나게 되면

 sass /home/anizone/public_html_new/sass/main.scss:/home/anizone/public_html_new/css/compile.css --style compressed

명령어를 실행하게 됩니다. 이 명령어를 통해서 main.scss 를 compile.css 로 컴파일하는거죠.

main.scss 는 다음과 같이 구성되어있습니다. 

@import "bootstrap.scss";
@import "bootstrap_custom.scss";
@import "layout.scss";
@import "forum/daum_editor.scss";
@import "forum/group_info.scss";
@import "forum/tag_list.scss";
@import "forum/document_list.scss";
@import "forum/layout.scss";
@import "forum/view_document.scss";
@import "timeline.scss";

import 로 하부의 폴더들을 불러오는 방식이죠. 이렇게 함으로써 상당히 긴 css 라인을 깔끔하게 관리하고 파일을 하나로 묶는데 성공했습니다. 

SASS 를 작업에 이용한지 근 몇개월 되가는데 지금와서 자평해보면

작업에 이용하기 전보다 최소한 CSS 코딩속도가 두배이상 빨라졌다고 생각합니다. 

여러분도 복사와 붙여넣기에 시달리지마시고 SASS 를 이용해보세요! 

특히 크로스 브라우징을 할때 매우 유리합니다.