, , ,

[Sass & Compass] Compass: config.rb を詳しくみる

公開日: 2013/10/31
更新日: 2020/10/04

設定ファイルとオプション。
コンパイル時に実行するタスクを設定する。

例えば、下記のように /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

Contents

config.rb

# 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等を読み込む場合に利用する。

開発(development)/公開(production)で設定を切り替える

コメントや圧縮オプションも、ruby でうまい事書けるんですね。

Inspecting Configuration Settings passed via the Command Line

こちらが詳しいです。

CSS 圧縮

本番用では CSS を圧縮する。

output_style = (environment == :production) ? :compressed : :expanded

コメント削除

本番用ではdebug用のコメントを付けない。

line_comments = (environment == :production) ? :false : :true

但し、コピーライトなど一部のコメントを残したい場合。
例えば、WordPress テーマに必須のブロックコメントは残したい。

先頭に ! を付ける。

/*!
Theme Name: Your Theme
etc...
*/

環境を指定してコンパイルする

本番（納品）ファイルのコンパイルは、明示的に行うと便利。

% compass compile -e production --force

コンパイル時にスクリプトを実行させる

コールバックを利用して、コンパイル時にスクリプトを実行させることができます。

例えば、WordPress テーマの開発時に style.css を適正なディレクトリに移動します。

CSSが生成されたとき、style.cssのみトップディレクトリ（ひとつ上の階層）に移動させる必要があります。
config.rb に下記を追記します。

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