css,scssをもっと便利に compassの使い方 (CSS Authoring Framework)
compassとは
以下の公式サイトではCSS Authoring Frameworkとされています。
まぁ、簡単に言うと、sassやscssをcssに変換したり圧縮したりしてくれるツールです。
コマンド打つだけでできるのでデプロイとかのコマンドにも忍ばせることができそうです。
http://compass-style.org
compassのインストール
Ruby製なので以下コマンドだけで大丈夫です。(前もってRubyをinstallしておきましょう)
gem install compass
ちなみにpython製はpyScssと言うものがあります。
圧縮前の初期設定
インストールをするとcompassコマンドが使用できるようになるので以下のコマンドで環境を作りましょう。(既存のプロジェクトに作りたい方はそこでこのコマンドをしてください。)
compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"
ファイル構成
基本的にconfig.rbにコンパイル後の生成されたファイルのディレクトリや、どういう風にコンパイルするかを記述します。
また、コマンドはconfig.rbのあるディレクトリで行うようになっています。
scssをコンパイルしてcssファイルを作成する
例えばtest.scssをコンパイルしたいときは以下のコマンドでコンパイルします。
compass compile sass/test.scss
すると今回では
cssファイルの中にtest.cssが作成されます。
注意点としてscssファイルはsassのファイルの中に置きましょう。
config.rbのファイル内容
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
#cssの出力先を記述している
css_dir = "css"
#scssのファイル設置場所を記述している
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
#output_styleはどのようにコンパイルするかを記述している
# output_style = :expanded or :nested or :compact or :compressed
output_style = :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:
#sassかscssどちらを使うか記述している(デフォルトはscss)
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
