CompassでCSS

Yuuです。 以前、Sassの記事を書いたのですが、Compassのほうが便利そうだったので、切り替えました。

Rubyは前回インストール済みなので、Compass入れるだけ。

1
2
gem update --system
gem install compass

で、コマンド実行

1
compass create

これでファイルが生成されます。 が、これ実行すると、なんかよくわからない感じでファイルが出力されます。 自由にディレクトリ構成とかしたいですよね、ってことでconfigファイル作ります。

config.rb
1
2
3
4
5
6
7
http_path = "/"
css_dir = "CSSの出力場所"
sass_dir = "SCSSの保存場所"
images_dir = "画像の保存場所"
javascripts_dir = "JavaScriptの保存場所"
output_style = Sassの出力形式(:expanded or :nested or :compact or :compressed
line_comments = CSSSCSSの行番号を出力するか(true or false

↓のような感じにしました。

config.rb
1
2
3
4
5
6
7
http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "/"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

参考:Compassを使ってSassのCSS出力を手軽にしよう|Blog|Skyward Design

このconfig.rbを自分のサイト作成のディレクトリにおいて上げます。 で、コマンドで下記を叩く。

config.rb
1
compass watch

これでSCSSのファイルが編集され更新されたら、自動的にCSSを整形して出力してくれます。

Compassの機能

インポート機能

creafixやらreset.cssをお手軽にインポートできます。

scss
1
2
3
4
@import "compass/utilities/general/clearfix";
.clearfix{
  @include clearfix;
}
css
1
2
3
4
.clearfix {
  overflow: hidden;
  *zoom: 1;
}

という感じでインポートするだけで終わり。

ベンダープレフィックス

スマートフォン対応サイト作るときに面倒なベンダープレフィックス。 これも結構簡単に設定できます。

scss
1
2
3
4
@import "compass/css3/border-radius";
.border-radius {
  @include border-radius;
}
css
1
2
3
4
5
6
7
.border-radius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

デフォルト値が5pxなのでプレフィックス付きで5px出力されます。 値を変えるなら

scss
1
$default-border-radius:20px;

という形で指定して、デフォルト値を変更するか、

scss
1
@include border-radius(2px);

という感じで個別の値を変更する感じです。 これだけでとりあえず、作業効率はだいぶ上がりました。

他にもmixinとかの機能やextendでクラス継承させたりもできるんですが、まだ完全に終えてないので徐々に覚えていこうと思います。

Comments