ProgrammingHTML/CSS過去記事
過去記事

config.rb - Compassの設定ファイル

config.rb の概要

Compassを利用するには config.rb と呼ばれる設定ファイルが必要です。
CompassやCompassに対応したツールであればデフォルト設定済みのファイルを出力してくれるので、必要な項目を変更するだけで使える用になります。
下段で必要最低限の設定を紹介します。

config.rb のデフォルトの内容

ツールを使って生成される 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_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# 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

初期設定から変更が必要なのはCSSファイルとSCSSファイルの設置場所の指定です。
プロジェクトディレクトリの直下で良ければ次のように設定します。

# CSSファイルのコンパイル先
css_dir = "/"
 
# SCSSファイルの保存先
sass_dir = "/"

Compassのプラグインを追加

require 'compass/import-once/activate'
# Require any additional compass plugins here.

上記では、require で import-once という Compass のプラグインを追加しています。
Compassのプラグインは公式サイトでも確認できるので、必要なものがあればここに追加してください。

パスの設定

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

上記にてサイトのパスやCSSファイルの場所などを指定します。
それぞれのオプション内容については下記を参考にしてください。

http_path：
サイトのパス
css_dir：
CSS ファイルが出力される場所
sass_dir：
SCSS ファイルの場所
images_dir：
画像ファイルの場所
javascript_dir：
JavaScript ファイルの場所

例えばCSSファイルの出力場所を css というディレクトリにして、SCSSをプロジェクト直下にするのであれば、以下のようになります。

http_path = "/"
css_dir = "css"
sass_dir = ""
images_dir = ""
javascripts_dir = ""

WordPressで使う際やCSSスプライトを使う際に http_path と images_dir は関係してきますが、詳しくは別の機会で紹介します。

仮想ディレクトリすべてを監視対象にする

css_dirとsass_dirには1か所のディレクトリしか指定できないので、複数の仮想ディレクトリでSassを使いたい場合、そのディレクトリごとにconfig.rbを作る方法があります。
ただこの場合config.rbが仮想ディレクトリごとに用意されることになるので、管理が煩雑になりやすいでしょう。
そのような場合、下記のような設定にするとconfig.rb以下にある仮想ディレクトリすべてが監視対象になります。 

css_dir = "/"
sass_dir = "/"

CSSの出力スタイルを設定

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

output_style はCSSファイルの出力スタイルを指定するオプションです。
出力スタイルは下記の4パターンが用意されています。

nested
SCSSファイルのネストが引き継がれる方式。
expanded
{} で改行する方式。
compact
セレクタと属性を 1 行にまとめて出力する方式。
compressed
圧縮して出力する方式。

それぞれの出力結果を下記で紹介します。
使い分けとして、開発中は読みやすい expanded、リリース時は圧縮してくれる compressed がおすすめです。

nested
/* line 1, test.scss */
.box {
  padding: 0; }
  /* line 3, test.scss */
  .box h1 {
    font-size: 12pt; }
expanded
/* line 1, test.scss */
.box {
  padding: 0;
}

/* line 3, test.scss */
.box h1 {
  font-size: 12pt;
}
compact
/* line 1, test.scss */
.box { padding: 0; }
/* line 3, test.scss */
.box h1 { font-size: 12pt; }
compressed
.box{padding:0}.box h1{font-size:12pt}

output_style を使って出力スタイルを選択するには次のように出力スタイル名を指定します。

output_style = :expanded

パスの指定方法を設定

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

ヘルパー関数で生成するURLはデフォルトで絶対パスの想定になっています。
相対パスを使いたい場合は以下のように relative_assets の値に true を指定してください。

relative_assets = true

スプライトを生成するときURLを相対パスにしたいといった場合にこのオプションを変更してください。

CSSファイルにデバッグ用コメントをつける

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

出力するCSSファイルにデバッグ用コメントを追加するかどうかの設定です。
line_comments の値を true に設定するとコメント有りとなり、下記のようにSCSSファイル名と行数がコメントとして追加されるようになります。

/* line 1, test.scss */
.box {
  padding: 0;
  margin: 1;
}

Sassの記述方法を切り替える

# 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

SassはSCSSとSASSの2種類の記述法を選択できます。
一般的には最もよく利用されているSCSSがデフォルトで設定されています。
SASSに変更する際は以下のようにします。

preferred_syntax = :sass

その他

ここで紹介した以外のオプションも多数用意されているので、必要な際はリファレンスの方をご参照ください。

関連記事