Compassのインポートとモジュール

css scss sass

Scssでは自分でどのプロパティを組み込むかを設定・定義しておかないと使い回しができません。
Compassでは最初から定義されたモジュールをインポートすることでお手軽にCSSを書き込むことが出来ます。

Compassの主なモジュール

大まかにわけてCompassには5つのモジュールがあります。

  • Css3

CSS3のモジュール。ペンだープレフィックスの付与やレガシープラウザ対応のミックスインなどが含まれる。

  • Typography

テキストのモジュール。テキストカラーや行間などのミックスインが含まれる。

  • Utilities

一般的なスタイルのモジュール。

  • Layout

レイアウト系のモジュール。

  • Reset

リセットCSSのモジュール。


モジュールのインポート方法。

@import "compass";
@import "compass/typography";
@import "compass/css3/border-radius";

大まかなモジュールから、使う機能が限定されてるのなら"/"(スラッシュ)で区切って絞り込みに設定した方が
コンパイルの高速化が図れます。


Compassのミックスインを使う。

Compassではよく使うミックスインが最初から多く用意されています。
Compassの公式ページではモジュール別に紹介されていますので、これを@includeで呼び出して使用します。


@include border-radius(角丸の半径)

.box{
 @include border-radius(10px,5px);
}

css(コンパイル後)

.box {
  -webkit-border-radius: 10px 5px;
  -moz-border-radius: 10px / 5px;
  border-radius: 10px / 5px; }



CSS3モジュールから引っぱってきたborder-radiusミックスインを使えば
自動的にペンダープレフィックスもつけてコンパイルしてくれます。