원문: How to structure a Sass project, John W.Long
Sass 덕분에 편해진 점 중 하나는 바로 스타일시트를 파일 여러개로 분리할 수 있게 되었다는 것입니다. @import 지시자를 사용해서 하나의 마스터 스타일시트 안에 여러 개의 개별 소스 파일을 불러들일 수 있습니다.
그런데 Sass 프로젝트 구조는 어떻게 설계해야 하는 걸까요? CSS 파일을 분리하는 정석적인 방법이 있을까요?
제가 즐겨 사용하는 Sass 프로젝트 구조는 다음과 같습니다.
stylesheets/
|
|-- modules/ # 공통 모듈
| |-- _all.scss # 모든 모듈을 include 한다.
| |-- _utility.scss # 모듈명
| |-- _colors.scss # 기타 등등...
| ...
|
|-- partials/ # Partials(조각 파일)
| |-- _base.sass # 모든 믹스인과 전역 변수를 불러들인다.
| |-- _buttons.scss # 버튼
| |-- _figures.scss # figures
| |-- _grids.scss # 그리드
| |-- _typography.scss # 타이포그래피
| |-- _reset.scss # 초기화
| ...
|
|-- vendor/ # 다른 프로젝트의 CSS 혹은 Sass 파일
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file
주 Sass 파일을 다음과 같이 작성한다면 스타일시트를 매우 깔끔하게 관리할 수 있습니다.
// 모듈 및 변수
@import "partials/base";
// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...
// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";
위의 구조에서 보시다시피 제 프로젝트는 크게 세 부분으로 나눌 수 있습니다. 모듈, partial, 벤더 관련 스타일시트로 각각 나뉩니다.
제가 구성한 Partial 디렉토리 안에 기본 partial 파일이 들어있는 것을 눈치 채셨을 것입니다. 이 partial이 존재하는 이유는 프로젝트의 Sass 개발 환경을 한 곳에 담아 두어 편하게 스타일시트 구성을 하기 위해서 입니다.
다음과 같이 구성할 수 있습니다.
// Compass를 사용합니다. (완전 멋지기 때문이죠!)
@import "compass";
// 폰트 굵기
$light: 100;
$regular: 400;
$bold: 600;
// 기본 폰트
$base-font-family: sans-serif;
$base-font-weight: $regular;
$base-font-size: 13px;
$base-line-height: 1.4;
// 고정폭 폰트
$fixed-font-family: monospace;
$fixed-font-size: 85%;
$fixed-line-height: $base-line-height;
// 제목
$header-font-weight: $bold;
@import "modules/all";
기본 스타일시트에는 전역 변수를 선언해 놓고 Sass 모듈을 전부 불러들여 놓습니다. 상기시켜 드리자면 모듈에는 import를 해도 CSS로 전혀 변환되지 않는 코드만 모아 두었습니다. 기본 partial에 모든 변수와 모듈을 모아 두면 Sass 전체 개발 환경에 접근이 가능하므로 이곳에서 import문 한 줄 추가로 언제든지 새로운 스타일시트 설정이 가능합니다. 때문에 각기 다른 partial을 이곳에서 불러들임으로써 스타일시트를 다양하게 만들어낼 수 있습니다. 이렇게 된다면 프로젝트 규모가 일정 규모 이상 커졌을 시 작업이 편리해 집니다.