Compass導入ガイド

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/