포럼
SASS 를 소개해봅니다.
2013.09.03 14:30
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 를 이용해보세요!
특히 크로스 브라우징을 할때 매우 유리합니다.
