[Compass] 이해하기

Sass의 반복 작업을 더욱 깔금하게 만들어주는 Compass에 대해서 알아보자

1) 개요

  - Compass에 대한 전반적인 개요

  

 Compass 사용법 from Byoung Do Ahn

  - Ruby로 개발되어진 툴이기 때문에 Ruby 설치가 필요하다 

2) 설치 및 사용법

  - 설치 : gem install compass

  - 생성 : compass create <MyProject>  

    + 프로젝트 밑으로 .sass-cache 폴더와 sass/.sass-cache 폴더가 생성된다 

    + config.rb : 환경설정 내경이 반영되어 있다 

$ tree

.

├── config.rb

├── sass

│   ├── ie.scss

│   ├── print.scss

│   └── screen.scss

└── stylesheets

    ├── ie.css

    ├── print.css

    └── screen.css

2 directories, 7 files

////////////////////////////////////////////////////////////

// config.rb

$ cat config.rb

# Set this to the root of your project when deployed:

http_path = "/"

css_dir = "stylesheets"

sass_dir = "sass"

images_dir = "images"

javascripts_dir = "javascripts"

.. 중략..

   + 생성시의 옵션 : --help

$ compass create sass-bootstrap --help

Usage: compass create path/to/project [options]

Description:

Create a new compass project at the path specified.

Options:

        --using PATTERN              A framework's pattern to use when creating the project.

    -x, --syntax SYNTAX           Specify the syntax to use when generating stylesheets.

                                              One of sass or scss. Defaults to scss.

        --prepare                         Prepare the project by only creating configuration files.

    -r, --require LIBRARY            Require the given ruby LIBRARY before running commands.

                                              This is used to access compass plugins without having a

                                              project configuration file.

    -l, --load FRAMEWORK_DIR         Load the framework or extensions found in the FRAMEWORK directory.

    -L, --load-all FRAMEWORKS_DIR    Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.

    -I IMPORT_PATH                   Makes files under the IMPORT_PATH folder findable by Sass's @import directive.

    -q, --quiet                           Quiet mode.

        --trace                            Show a full stacktrace on error

        --force                            Allows compass to overwrite existing files.

        --dry-run                        Dry Run. Tells you what it plans to do.

        --boring                          Turn off colorized output.

    -c, --config CONFIG_FILE     Specify the location of the configuration file explicitly.

        --app APP                      Tell compass what kind of application it is integrating with. E.g. rails

        --sass-dir SRC_DIR          The source directory where you keep your sass stylesheets.

        --css-dir CSS_DIR            The target directory where you keep your css stylesheets.

        --images-dir IMAGES_DIR  The directory where you keep your images.

        --javascripts-dir JS_DIR     The directory where you keep your javascripts.

        --fonts-dir FONTS_DIR      The directory where you keep your fonts.

    -e, --environment ENV          Use sensible defaults for your current environment.

                                              One of: development (default), production

    -s, --output-style STYLE       Select a CSS output mode.

                                             One of: nested, expanded, compact, compressed

        --relative-assets              Make compass asset helpers generate relative urls to assets.

        --no-line-comments         Disable line comments.

        --bare                            Don't generate any Sass or CSS files.

    -?, -h, --help                       Show this message