블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 4. 20. 13:11 HTML5, CSS3/CSS

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



1) 개요

  - Compass에 대한 전반적인 개요

  

  - 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


posted by 윤영식