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
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. 다음그림과같이실행이된다. 기본적으로사용되는폴더및파일들이자동으로생성된 다.
다음그림은폴더구조이다. 자동으로생성된 cache folder 구조가같이보인다.
두번째프로젝트생성방법. --using 옵션사용법을알아본다. css framework을어떤것으로사용할것인지를옵션으로주는방법이다. 이번에는 blueprint css framework을사용하는프로젝트생성방법이다. 참고로 blueprint css framework은 grid를기반으로하는 css framewok이다. $ compass create myproject - using blueprint 다음그림과같이실행이된다. 기본으로프로젝트를생성한것과다른폴더와파일들이 많이생성이된모습이다. 다음그림은폴더구조이다. 자동으로생성된 cache folder 구조가같이보인다.
추가된내용을보면 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 --cssdir css01 --javascript-dir javascript01 --images-dir images01
다음그림은위의조건에맞게생성된폴더구조를보여주는모습이다. 지금까지프로젝트생성시파일들중 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.
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 폴더에저장한다.