CSS3를 이용한 Compass 사용버

1. Compass 사용법.
1. Compass를 간단하게 특징을 알아 보자.
Compass는 css를 쉽게 개발 및 편집할 수 있는 CSS Framewok이며, ruby를 이용하여 만
들어진 일종의 개발 툴이다.
Compass는 Sass를 사용하며, 확장자는 (.scss)를 사용한다.
Sass는 CSS3를 기반으로 변수 지원, 계층구조 지원, 연산과 내장함수 지원, Mixins, 선택자
상속 등의 기능이 추가되어 확장 된 구조이다.
2. Ruby 설치.
Compass를 설치 하려면, 그 이전에 Ruby를 먼저 설치해야 한다.
맥에서는 대부분 설치가 되어 있지만 그렇지 않다면 개발자용 툴을 설치하는 것도 좋다.
Ruby의 공식 사이트는 http://ruby-lang.org 이다.
공식 다운로는 사이트는 http://www.ruby-lang.org/ko/downloads/ 이곳이지만, 가능한 영
문 사이트에서 다운 받도록 하자.
Ruby 영문 다운로드 사이트 http://www.ruby-lang.org/en/downloads/
중간 쯤 내려 가면 RubyInstaller 이런 곳이 나온다. 이 곳에서 RubyInstaller download
page 을 누르면 다운로드를 받을 수 있는 페이지가 나온다.
첫 번째 버전인 Ruby 1.9.3-p125 을 다운 받아 윈도우에 설치를 한다.
설치 시, Program Files 폴더에 설치 하지 말고 설치 경로는 디폴트로 한다.
또한 Add Ruby executables to your PATH를 체크 하고 설치를 한다.
3. Compass 설치.
참고로 Compass를 설치하면 Sass는 자동적으로 설치된다.
도스 명령 프롬프트에서 아래의 명령어로 Compass를 설치한다.
C:>gem install compass
Compass까지 설치가 끝나면 Sass( .scss) 파일을 컴파일할 준비가 끝난 것이다.
맥용은 다음과 같이 진행을 하면 된다.
1. $ gem update –system
2. $ gem install compass

2. 4. Compass 명령어를 알아 보자.
compass <command> [<option>, <option>, <option>….. <option>]
command : 명령어.
clean - Remove generated files and the sass cache.
compile - Compile Sass stylesheets to CSS.
create - Create a new compass project.
init - Add compass to an existing project.
watch - Compile Sass stylesheets to CSS when they change.
config - Generate a configuration file for the provided command line options.
frameworks - List the available frameworks
grid-img - Generates a grid background image.
imports - Emit an imports suitable for passing to the sass command-line.
install - Install an extension's pattern into your compass project.
sprite - Generate an import for your sprites.
option에 대하여는 실제 명령어를 사용하면서 좀더 상세하게 다루기로 한다.
5. Compass 프로젝트 생성 사용법에 대한 실행을 하기로 하자.
첫 번째 프로젝트 생성 방법.
기본적으로 compass framework을 가지고 (.scss) 파일을 다루는 것이다. 또한 각 폴더
(project fodler, sass, stylesheet) 및 파일(config.rb, screen.scss, print.scss, ie.scss, ie.css,
print.css, screen.css)들이 기본적으로 생성이 된다.
가장 간단한 명령어는 다음과 같다.
$ compass create myproject.
다음 그림과 같이 실행이 된다. 기본적으로 사용 되는 폴더 및 파일들이 자동으로 생성된
다.

3. 다음 그림은 폴더 구조이다. 자동으로 생성된 cache folder 구조가 같이 보인다.

4. 두 번째 프로젝트 생성 방법.
--using 옵션 사용법을 알아 본다.
css framework을 어떤 것으로 사용할 것인지를 옵션으로 주는 방법이다.
이번에는 blueprint css framework을 사용하는 프로젝트 생성 방법이다.
참고로 blueprint css framework은 grid를 기반으로 하는 css framewok이다.
$ compass create myproject -–using blueprint
다음 그림과 같이 실행이 된다. 기본으로 프로젝트를 생성한 것과 다른 폴더와 파일들이
많이 생성이 된 모습이다.
다음 그림은 폴더 구조이다. 자동으로 생성된 cache folder 구조가 같이 보인다.

5. 추가된 내용을 보면 images 폴더에 grig.png 이미지 파일이 있으며, sass 폴더에 partials
폴더가 생성 되었으며, 그 폴더에 _base.scss 파일이 있다. _base.scss 파일은 blueprint에
서 사용 하는 기본적인 변수들이 선언 되어 있다.
이로서 프로젝트 생성시 필요한 css framework을 어떤 것으로 할 것인지 옵션을 주는 방
법을 알아 보았다.
세 번째 프로젝트 생성 방법.
--syntax 옵션을 사용하는 명령어를 알아 본다
이 번에는 기본 문법을 어떤 것으로 사용할지 선택을 할 수 있는 옵션에 대하여 알아 보
는 시간이다.
$ compass create myproject_base04 --syntax sass
네 번째 프로젝트 생성 방법.
이번에는 프로젝트 생성시 필요한 폴더의 구조를 원하는 이름으로 생성 하는 옵션에 대
하여 알아 본다.
옵션을 사용하는 명령어를 알아 본다.
--sass-dir "sass" 이 옵션은 sass 폴더 이름을 변경할 수 있다.
--css-dir "css" 이 옵션은 css 폴더 이름을 변경할 수 있다.
--javascripts-dir "javascript" 이 옵션은 javascript 폴더 이름을 변경할 수 있다.
--images-dir "images" 이 옵션은 images 폴더 이름을 변경할 수 있다.
다음은 프로젝트 생성시 명령어와 옵션을 주어서 원하는 폴더 및 css framework, 어떤
문법용을 사용 할 것인지 작성한 예이다.
$ compass create myproject01 --using blueprint --syntax sass --sass-dir sass01 --css-
dir css01 --javascript-dir javascript01 --images-dir images01

6. 다음 그림은 위의 조건에 맞게 생성된 폴더 구조를 보여 주는 모습이다.
지금까지 프로젝트 생성시 파일들 중 config.rd 구조를 잠시 알아 보자.
다음은 config.rb 파일의 내용이다. 지금까지 옵션으로 주었던 내용이 그대로 환경 파일
에 적용된 모습니다.
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css01"
sass_dir = "sass01"
images_dir = "images01"
javascripts_dir = "javascript01"
# You can select your preferred output style here (can be overridden via the command
line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors.

7. Uncomment:
# line_comments = false
preferred_syntax = :sass
위 파일의 내용을 보면 그 동안 실행된 옵션이 내용이 그대로 보인다.
마지막으로 기존 프로젝트에 추가를 하는 경우이다.
$ cd myproject
$ compass imstall blueprint --syntax sass
기존 프로젝트에 적용된 모습이다.
6. Compass compile 방법을 알아볼 차례이다.
컴파일 방법은 무척이나 간단하다. 3가지 정도의 방법과 옵션 사용한다.
$ cd sass
$ compass compile sass/base.scss -> 지정된 파일만 컴파일 한다.
$ compass watch sass/base.scss -> 지정된 파일만 컴파일 하는데 원본 파일이 수정이
되어 업그레이드가 되면 자동으로 해당 .scss 파일을 컴파일 하여, css 폴더에 저장 한다.
$ compass watch . -> 현재 있는 폴더의 모든 .scss 파일을 자동으로 감지 하여 css 폴더
에 저장한다.