Compass導入ガイド #CSS

Compass概要：

Compassとは：Sass(SCSS)のコンパイラー
今更感もありますが、Sassの直接コンパイルよりも一回り拡張性があり、gulpなど大掛かりなタスクランナーよりも設定が簡易。

使用想定ケースやターゲット

cssはある程度書けるが、Sassは熟知していない方
フロントエンドエンジニア以外のエンジニアやデザイナーが、CSSまわりを少し書く必要がある時
タスクランナー導入のコストが懸念されるチーム体制やファイル状態の場合、まだ使えるライブラリであるかと思われる。
コンパイル自体はオンラインでも変換サービスがあるので、フロントエンド以外の人が触る時は、一時的にはオンラインでのコンパイル使用も許容しても良いでしょう。
AtomやVisual Studio Codeなどのエディタの拡張ツールにもSassコンパイラがあるので、そちらを使っても良いでしょう。

備考

今回はCompass自体の拡張機能は使いません。Sassコンパイラーとしてのみ使います。
日本語ファイル/フォルダがあればエラーが出ますので英字で作成しましょう
環境はMac、iTerminal、Atom

導入

事前準備

Rubyの有無確認（Macはデフォルトで入っていると思います）
$ ruby -v

Sassインストール

Sassインストール
$ gem install sass

Sass確認
$ sass -v

gemアップデート
$ gem update --system

Sassアップデート
$ gem update sass

Compass インストール

$ sudo gem install compass

確認
$ compass -v

アップデート
$ gem update compass

プロジェクト作成

作業ディレクトリ直下に作成する
$ compass create

作業フォルダ作成したい時
$ compass create フォルダ名

ディレクトリ指定:
$ compass create --sass-dir "scss" --css-dir "css"

デフォルトで作成されるフォルダ

Sass フォルダ名：sass
CSS フォルダ名：stylesheets
↑ 基本不要なファイル

初期自動生成のSass/cssファイルを作成しない > config.rb と sassフォルダのみ生成させる
$ compass create --bare

config.rb設定例

# パス指定
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# オプション
output_style = :expanded
line_comments = false

↑ コマンドで上記一発で作成するにはこちら ↓
$ compass create --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

※ (自動生成されたscss / cssファイルは削除しても良い)

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

圧縮する場合
output_style = :compact
(デフォルトは「expanded)
コメントの表示(基本必要無いのでfalseで)
line_comments = false
画像のクエリ情報の削除
(キャッシュ削除のためのパラメータ（ランダムな数字）が画像パスの末尾追加される、つけたくない場合は以下のように指定）
asset_cache_buster :none
Sassのコンパイル時に Source Map の生成
sourcemap = true or false
Source Map（ソースマップ）:
コンパイル元の位置を示すァイル。Sassファイルの場所を表示。
（必要になった事は無い）

Compass稼働

$ compass w

監視フォルダ指定
$ compass w フォルダ名

Sass稼働テスト(必要あれば)

作業フォルダにて
test:css作成

#main {
  width: 600px;
  p {
    margin: 0 0 1em;
    color:  #666;
    }
}

$ cd scss作成した作業パス

「test.scss」を「test.css」にコンパイルする（同じフォルダ内でコンパイル）
$ sass test.scss:test.css

フォルダをまたいでコンパイル(sassフォルダ、cssフォルダが別の場合)
$ cd sassフォルダ
$ sass test.scss:../css/test.css

アウトプットスタイルの指定付きのコンパイル

例)
$ sass test.scss:test.css --style expanded

- nested（デフォルト）：ネスト型（一般的）

#main {
  width: 600px; }
  #main p {
    margin: 0 0 1em;
    color: #666; }

expanded : 左寄せ型

#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
  color: #666;
}

compact : プロパティのチェーン型

#main { width: 600px; }
#main p { margin: 0 0 1em; color: #666; }

compressed : minify型

#main{width:600px}#main p{margin:0 0 1em;color:#666}

Watch = コンパイルの継続監視、自動コンパイル

ファイル指定のWatch
$ sass --watch test.scss:test.css
フォルダ単位でWatch(同じフォルダ内に)
$ sass --watchフォルダ内に書き出される
カレントディレクトリを監視 > ディレクトリ内に書き出し
$ sass --watch .
書き出し先を指定 > CSS を書き出すフォルダをコロン（：）で区切って指定
例)「input」フォルダ内の Sass ファイルを監視 > CSS フォルダ内の「output」フォルダに CSS ファイルを書き出す場合
$ sass --watch input:css/output
↑意味：sassファイル監視 inputフォルダのSassファイルを:cssに/outputフォルダに書き出し
コンパイル結果のファイル作成、ファイル名指定のケース
$ sass --watch input:css/css_src ←新規作成フォルダ名
合わせ技
sass --watch --style expanded input:css/output

自動停止 --stop-on-error

エラーが起きた場合は停止するオプション
- 基本はエラーがあっても監視は継続される
- 因みにgulpだとファイルの設定をしないとエラー時はWatchは停止されるので、環境構築の作業コストは発生する $ sass --stop-on-error --watch

キャッシュの制御

何も設定しないと.sass-cacheフォルダが作成され、その中に都度キャッシュファイルが作成される。
何のために作られるか？ > コンパイル処理の高速化
= 遅いと感じなければ作成しなくても良い
Git管理する場合、.gitignoreの設定が必要
キャッシュフォルダを作らない場合
$ sass --watch --no-cache
キャッシュフォルダを別フォルダに設定
$ sass --watch --cache-location フォルダ名

まとめ。汎用的で早い環境構築。

新規Sass環境をCompassで作成
$ compass create --bare --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"
で初期設定作成
config.rb設定

# 追加 no cache 
cache = false
# 追加 no map
sourcemap = false

# コメントアウト取る
line_comments = false

sassフォルダファイル作成 $ cd sass $ vi style.scss

.hoge{
  .huga{
    width:auto;
  }
}

ドキュメントルートに戻る
$ cd ../

作動
$ compass w

結果
- cssフォルダとcssファイルが生成され、コンパイル書き出しされる
style.css

.hoge .huga {
  width: auto;
}

参考にさせていただいたサイト:
http://book.scss.jp/code/c6/01.html
http://www.webdesignleaves.com/wp/htmlcss/652/