[Sass & Compass] Compass: config.rb を詳しくみる
設定ファイルとオプション。
コンパイル時に実行するタスクを設定する。
[markdown]
> * [Configuration Reference | Compass Documentation](http://compass-style.org/help/tutorials/configuration-reference/)
> * [WebTecNote – [Compass] 超訳 Configuration Reference](http://tenderfeel.xsrv.jp/css/compass-css/1235/)
> * [【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編 ｜ Developers.IO](http://dev.classmethod.jp/ria/html5/web-desiner-corder-scss-config/)
例えば、下記のように `/theme` ディレクトリ内で開発したい。
“`
.
├── .sass-cache
├── config.rb
├── sass
│ ├── ie.scss
│ ├── print.scss
│ ├── screen.scss
│ └── style.scss
└── theme
├── images
├── index.html
└── stylesheets
├── ie.css
├── print.css
├── screen.css
└── style.css
“`
### config.rb
“`ruby
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = “/”
css_dir = “theme/stylesheets”
sass_dir = “sass”
images_dir = “theme/images”
javascripts_dir = “theme/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
“`
### additional_import_paths
複数のプロジェクトで共有するようなmixin等を読み込む場合に利用する。
> * [CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG](http://liginc.co.jp/designer/archives/11623)
## 開発(development)/公開(production)で設定を切り替える
コメントや圧縮オプションも、ruby でうまい事書けるんですね。
> [Inspecting Configuration Settings passed via the Command Line](http://compass-style.org/help/tutorials/configuration-reference/)
こちらが詳しいです。
> * [Compassで本番用と開発用で設定を振り分けてみる。 | howtohp](http://howtohp.com/css/compass-environment_setting.html)
> * [開発用CSSと納品用CSSで画像の読み込み先を変更する 開発用と本番用で色々変えてみる](http://neotag.net/log/2011/12/Less-and-Sass-Advent-calendar-2011-24th.html)
### CSS 圧縮
本番用では CSS を圧縮する。
“`ruby
output_style = (environment == :production) ? :compressed : :expanded
“`
### コメント削除
本番用ではdebug用のコメントを付けない。
“`ruby
line_comments = (environment == :production) ? :false : :true
“`
但し、コピーライトなど一部のコメントを残したい場合。
例えば、WordPress テーマに必須のブロックコメントは残したい。
> * [Compass Compiling and WordPress Themes | CSS-Tricks](http://css-tricks.com/compass-compiling-and-wordpress-themes/)
先頭に `!` を付ける。
“`css
/*!
Theme Name: Your Theme
etc…
*/
“`
### 環境を指定してコンパイルする
本番（納品）ファイルのコンパイルは、明示的に行うと便利。
“`
% compass compile -e production –force
“`
## コンパイル時にスクリプトを実行させる
コールバックを利用して、コンパイル時にスクリプトを実行させることができます。
> * [Configuration Reference | Compass Documentation](http://compass-style.org/help/tutorials/configuration-reference/)
例えば、WordPress テーマの開発時に style.css を適正なディレクトリに移動します。
> * [Compass Compiling and WordPress Themes | CSS-Tricks](http://css-tricks.com/compass-compiling-and-wordpress-themes/)
CSSが生成されたとき、style.cssのみトップディレクトリ（ひとつ上の階層）に移動させる必要があります。
config.rb に下記を追記します。
“`ruby
require ‘fileutils’
on_stylesheet_saved do |file|
if File.exists?(file) && File.basename(file) == “style.css”
puts “Moving: #{file}”
FileUtils.mv(file, File.dirname(file) + “/../” + File.basename(file))
end
end
“`
.scss を更新してコンパイルを実行します。
“`
% compass w
>>> Change detected at 15:09:18 to: style.scss
identical theme/stylesheets/ie.css
identical theme/stylesheets/print.css
identical theme/stylesheets/screen.css
create theme/stylesheets/style.css
Moving: /Users/****/projects/lab_css/theme/stylesheets/style.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
“`
“`
.
├── .sass-cache
├── config.rb
├── sass
│ ├── ie.scss
│ ├── print.scss
│ ├── screen.scss
│ └── style.scss
└── theme
├── images
├── index.html
├── style.css
└── stylesheets
├── ie.css
├── print.css
└── screen.css
“`
[/markdown]