とりあえずやってみよう！シリーズは続きます。今回は、Compassです。
SASSをやっているときに、こんなサイトも目にしていて、近いうちにやらねばと思っていました。
関係無いですが、ドットインストールをとりあえず手当たり次第やるってのは視野を広げるって意味でなんか良さそう。メジャーな言語や流行りをざっと抑えている感じもしますし。
それでは始めます。毎度のことですがちょっと雑目のまとめです。
Compassとは
- CSSを効率的に書くためのフレームワーク
- Sassと合わせて使える便利なやつ
- StyleSheetのjQueryとも言われる
簡単な使い方
$ compass create
でテンプレートが作成される。
├── config.rb
├── sass
│ ├── ie.scss
│ ├── print.scss
│ └── screen.scss
└── stylesheets
├── ie.css
├── print.css
└── screen.css
こんな感じ。
$ compass watch
をルートで行うとsassが変更された時に自動的にcssの方も更新されるようになる。とりあえず、最初に@import "compass";としてcompassを利用するのに必要な設定をインポートする。これで大体一通り使えるようになるが、cssのリセットをするための@import "compass/reset"は別でインポートする必要がある。
@includeが非常に便利。例えば、border-radiusはこんな感じに変換してくれる。
.scss
.sample {
@include border-radius(3px);
}
.css
.sample {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
他に様々なテンプレートが用意されている。詳細はドキュメントで確認できる。
