유스풀패러다임

Published on

이전에도 한번 소개한 것처럼 SassCompass는 CSS 개발의 생산성을 높여주는 유용한 도구들이다. 부연하자면, Sass는 변수(variable), 믹스인(mixins) 같은 개념들을 통해 CSS를 모듈화시켜 코드의 재활용성을 높여주는 반면, Compass는 이런 Sass의 강력한 기능들을 플러그인 형태의 확장 구조로 다시 한번 추상화 시킴으로써 HTML5/CSS3 같은 복잡한 최신 CSS 개발 환경에서도 쉽고 일관되게 CSS 개발을 가능하게 도와주는 강력한 개발 도구(authoring framework) 인 셈이다.

compass-css-framework

Sass와 Compass는 주로 루비/레일스 커뮤니티에서 공유되고 사용되는 것으로 알려져 있지만 반드시 루비 환경에서만 동작하는 건 아니다. 실은 특정 개발 환경에 중립적이기 때문에 오히려 루비가 아닌 다른 환경에서도 그 진가를 발휘하는 좋은 CSS 개발 도구라  할 것이다. 예컨대 WordPress 의 테마(theme)를 개발할 때도 이 Sass/Compass 콤비네이션을 활용할 수 있다. 여기서 간단히 그 방법을 소개한다.

기본 전제

  1. Sass/Compass는 이미 설치되었다고 가정한다. (설치에 관해서는 여기를 참조)
  2. 작업할 워드프레스 테마 디렉터리가 이미 만들어져 있다고 가정한다.

단계별 절차

워드프레스 테마의 루트 디렉터리에서 다음과 같은 compass 명령으로 설정파일을 하나 생성한다.

$ compass config --css-dir=.

디폴트로 이 파일은 config/compass.rb 로 생성되는데, 이 파일을 열어 보면 다음과 같이 기본적인 설정이 선언되어 있다. (물론 설정값은 프로젝트에 맞게 조정할 수 있다)

http_path = "/"
css_dir = "."
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

이제 위의 설정에 맞게 테마 프로젝트의 디렉터리 경로들을 조정했다면 sass 디렉터리를 하나 주가하고, 그 속에 sass파일을 하나 만들자. 여기서는 style.scss 라고 하였고, 그 속에 다음과 같이 간단하게 몇 줄의 코드를 추가해 보았다. (참고로 여기 코드는 어디까지나 샘플이며, 실제 프로젝트에서는 조금 더 모듈화가 필요할 것이다. 자세한 내용은 Comass BestPractice 문서를 참조)

@import "compass";

#box {
  text-align: justify;
  background-color: #dedede;
  @include border-radius();
}

위의 코드를 간단하게 설명하자면, 우선 1행에서 compass 모듈을 로드한다. 이 모듈은 compass의 기본 모듈인데, 그 속에는 CSS3 처리나 타이포그래피(typography), 기타 각종 유틸리티 모듈들이 포함되어 있기 때문에 프로젝트에서는 별도의 CSS 코딩 없이 바로 이 모듈에서 미리 만들어 제공하고 있는 CSS 코드들을 활용할 수 있는 것이다. 예를 들어, 위의 sass 파일에서는 6행에서 ID가 #box인 DOM 문서 객체에 대해 border-radius() 라는 믹스인을 적용하고 있다. 이 단 한 줄의 코드 삽입만으로 모든 CSS3 지원 브라우저에서 호환되는 둥근모서리 스타일링이 간단하게 처리된다.

방금 전까지 작성한 파일은 CSS 가 아닌 sass/scss 파일이었다. 그렇다면 이제 이 파일을 브라우저가 인식할 수 있는 CSS로 컴파일하는 일만 남았다. compass에서 제공하는 다음 명령을 띄워 놓으면 sass 파일의 변경을 자동으로 감지하여 css 파일로 컴파일시켜준다.

$ compass watch

이제 브라우저에서 확인해 보면 방금전 우리가 만든 style.scss 파일이 컴파일 되어 자동으로 style.css 파일이 생성된 것을 확인할 수 있을 것이다. 나머지 작업들은 통상적인 워드프레스 테마 개발 과정을 따르면 된다.

참고자료

blog comments powered by Disqus