第6章 Sassを更に便利にする Compass

6-1 Compassを使用する準備

Compassをインストール

gem install compass

※Macはコマンドの先頭に"sudo"を付けてパスワードを入力する必要があります。

インストールされているか確認（バージョン確認）

compass -v

Compassをアップデートをする

gem update compass

※Macはコマンドの先頭に"sudo"を付けてパスワードを入力する必要があります。

プロジェクトを作成する

compass create

compass create フォルダ名

compass create --sass-dir "scss" --css-dir "css"

config.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

compass create --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "img"

# 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


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

アウトプットスタイルを設定する

output_style = :compact

relative_assets = true

line_comments = false

# preferred_syntax = :sass

environment = :development or :production

asset_cache_buster :none

fonts_dir = "font"

Compassでコンパイルしてみる

compass watch

compass w

compass w フォルダ名

>>> Compass is watching for changes. Press Ctrl-C to Stop.

compass compile

compass compile --output-style compressed --force