Compassの初期設定について

ブログ当番3週連続の松井です。
サイコロで当たり続けるまでぶつの森日記でも書いてやろうかと思いましたが、
村がカオスなのでやめました。
今回はCompassの初期設定についてです。
以前kameさんも書いていたのですが、もう少し詳しく書いていきます。


SassとRubyがインストール済みということを前提に書いていきます。
インストール方法の詳細はCSS HappyLifeさんとこがわかりやすいです。
※Sassの環境構築にあたって、はじめはScoutを使っていたのですが、
黒い画面で設定したほうが楽な気がします。

1.Compassをインストール

インストールはターミナルで↓下記のコマンドを打つだけです。

gem update --system
gem install compass

2.初期設定

まずはターミナルでSassを使いたいフォルダまで移動します。
※cd フォルダ階層 で移動できます。

cd C:\xampp/htdocs/sass/demo

移動できたら、下記のコマンドを打つだけ。

compass create

これでCompassを使えるようになってます。

3.config.rbの編集

以前kameさんの記事にもある通りこういったファイルが生成されます。

├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

CSSの出力場所がstylesheetsだとさすがに使いづらいので変更します。
出力場所や保存場所を変更したいときは、
Compassをインストールするときに出来た、「config.rb」を編集します。

config.rbの書き方は、こんなかんじ。
※()にはデフォルトの値を書いてます。

      http_path = "/"
        css_dir = "CSSの出力場所(stylesheets)"
       sass_dir = "SCSSの保存場所(sass)"
     images_dir = "画像の保存場所(images)"
javascripts_dir = "JavaScriptの保存場所(javascripts)"

変更例

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

“/”でフォルダ指定せずにディレクトリ以下全部を監視ということもできます。
imgはimage-width()で画像サイズを自動取得できるらしく、
どこのディレクトリに画像に置いてもいいように”/”にしとくと良いとか何かの記事で読みました。
先日、チーム内でディレクトリ構成を決めたのですが、
SASSについてもきっちり決めてconfig.rbを使いまわしたいですね。

config.rbはファイル形式以外にも色々設定できます。

Sassの出力形式の変更

output_style = :compressed

形式は以下の4つがあります。
:expanded (標準的なCSSの記述スタイル)
:nested (入れ子にしたスタイル)
:compact (1行で記述するスタイル)
:compressed (ぎっちぎちに圧縮したスタイル)

本番用と開発用とで切り替えて出力することもできるみたいです。

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

environment == :production で本番用なら:compact、
そうでない(開発用)なら:expanded という意味になります。

※少し話がそれますが、
プロパティの前にある空白をタブにしたり、削除したりしたい場合はこちらの記事が参考になります。
(変更が反映されるまでちょっと時間がかかる気がします。私の環境だけ?)

CSS側のコメントの有無

line_comments = true

これでCSSにSASS側の行番号を出力できます。
複数で作業する必要がある場合や、SASS初心者にとってはあると便利かもしれません。

複数行のコメントを書く場合

SASSとは直接関係ないのですが、
Rubyの書き方がさっぱりだったので・・・

Rubyで一行の場合は#、
複数行のコメントはbegin endの間に書きます。

# 一行の場合
=begin
複数行の場合は
こんなかんじで
書きます
=end

その他のconfig.rbの設定については公式サイトを参考にしてください。

4.CSSの出力

コマンドラインで毎回打っても良いのですが、バッチを作っておくと安心です。

compass watch

とだけ書かれたファイルを compass_start.bat とかで保存。
次からはこのバッチファイルをダブルクリックするだけでCompassが使えます。

ファイル変更後に本番用と開発用とで出力を切り替えたい場合は、
下記のコマンドを打ちます。

開発用の場合
※デフォルトは開発用です。

compass watch -e development

本番用の場合

compass watch -e production

以上、Compassの初期設定でした。
Compassの使い方については機会があればまた今度。