CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

以前書いた、 CSSのベンダープレフィックスをいい感じに追加してくれるPrefixrが便利そう。 でSASSにベンダープレフィックスを自動で追加してくれる機能あればいいのにって言ってたんですが、Compassにありました。クソ便利

正確に言うと、CompassにはSASSのmixinとしてひと通り用意されてるってことです。

Compass公式サイト

  1. インストール
  2. 初期設定
  3. Compassの機能をインポート
  4. SASSファイルからCSSファイルを生成
  5. Compassを使って書いてみる

1 Compassをインストール

Compassをインストールするには、SASS同様、Rubyがインストールされている必要があります。
Macの方は元々入ってるので、心配無用です。Linux使ってる人なら、自分で入れれるでしょう。
Windowsの方はお近くのAppleStoreで(ry。嘘です。

Ruby Install Guideを参考にすればいいと思うよ。

ターミナルで下記のコマンドでインストール

gem update --system
gem install compass

これでインストールは完了。

2.初期設定

インストールが完了したら、Compassのコマンドが使える様になってるはずなので、コマンドでサクっと初期設定します。
ターミナルで、SASSファイルや、cssを置く予定の場所で、下記のコマンドを実行します。

※rbenvでrubyのバージョン管理してる人は、rbenv rehashコマンドでcompassコマンドが使える様になるはずです。

compass create

実行するとこんな感じのファイルが生成されます。

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

自分の場合、CSSファイルは”css”ってフォルダ名にしたいので、ちょろっと、オプションを付けます。
あと、画像用のフォルダと、JavaScript用のフォルダも設定しておきます。あとで、config.rbを編集すればいつでも変更はできます。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

既存のプロジェクトに導入するときなんかで、初期で作られるCSSファイルはいらない場合は以下のようにすれば、おkです。
config.rbとsassフォルダだけが作られます。

compass create --bare

SASSシンタックスを使いたい場合

デフォルトではSCSSのシンタックスなので、SASSシンタックスを使いたい場合もオプションで変更できます。
SCSSの方がCSSっぽくて楽だと思いますけど。

compass create --syntax sass

これで初期設定は完了。

他にも色々な設定があるので詳しくは公式のConfiguration Referenceを参考にしてください。

3.Compassの機能をインポート

Compassには様々なMixinやスタイルが用意されています。使い方は簡単で、@importでインポートするだけです。

/* CSS3のborder-radiusのみインポート */
@import "compass/css3/border-radius";
/* CSS3関連のMixinを丸っとインポート */
@import "compass/css3/";
/* クリアフィックス等のユーティリティ系Mixinをインポート */
@import "compass/utilities" 
/* コンパスの機能を全部インポート 基本的にはこれだけでOKだと思います。 */
@import "compass" 

/* リセット用CSSをインポート */
@import "compass/reset/";

上記のresetに関してはMixinではなく、CSSそのものなので、インポートした場所にEric Meyer’s reset 2.0をベースにしたスタイルが書きこまれます。

@import "compass"で全ての機能をインポートしてもリセット用スタイルは個別にインポートしないと書きこまれません

4.SASSファイルからCSSファイルを生成

SCSSファイルからCSSを生成するには、SASS同様コマンドラインでコンパイル or ウォッチします。

コマンド

compass compile sass/style.scss 
compass watch sass/style.scss #変更を監視して、保存の度にコンパイル
compass watch --output-style compressed sass/style.scss #一行に圧縮
compass w #引数なしで指定したsassディレクトリの中身を全部監視

たったこれだけです。SASSの場合、出力先のCSSファイル名も指定しなきゃいけなかったけど、Compassは最初に設定しているので、必要ありません。

設定したCSS用フォルダに同じ名前(この場合style.css)のCSSファイルが生成されます。

5.Compassを使って書いてみる。

Clearfix

例えばクリアフィックスをする場合、下記の様に書きます。

Compass (SCSS)

@import "compass/utilities/general/clearfix";
.sample {
    @include clearfix;
}

CSS

.sample {
    overflow: hidden;
    *zoom: 1;
}

こんな感じで出来上がり。でも、これぐらいなら、あんまり便利さが実感できませんね。

コンフィグレーション変数とMixinの組み合わせ

Compassにはコンフィグレーション変数という機能があります。
プロパティに対して、デフォルトのバリューが用意されており、デフォルトのバリューを使う場合は、省略することができます。
もちろん、各自変数の中身を上書きすることができます。

Compass (SCSS)

@import "compass/css3/border-radius";
/* compassの初期設定 */
//$default-border-radius:5px;
/* 上書き */
$default-border-radius:10px;

.sample1 {
    /* デフォルトを使用してバリューを省略した場合 */
    @include border-radius;
}

.sample2 {
    /* 通常の使い方 */
    @include border-radius(2px);
}

CSS

.sample1 {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
}

.sample2 {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -o-border-radius: 2px;
   -ms-border-radius: 2px;
   -khtml-border-radius: 2px; /* 最新バージョンでは出ません。 */
   border-radius: 2px;
}

もっと色々サンプル書いてみようと思ったんですが、長くなってきたんで、この辺にしておきます。

どうでしょう、もうインストールせざるを得ませんよね?Compassにはまだまだ他にも一杯機能があるので、またおいおい紹介したいと思います。
Blueprint960Susyなんかのフレームワークも簡単に使えるようなので、今後試してみたいと思います。

comments powered by Disqus
« Newer Older »