Compass（Reset CSS、compassモジュール、CSS3モジュール）
Compassメモ（Reset CSS、compassモジュール、CSS3モジュール）
Compass では、Reset CSSやベンダープリフィックスを補完してくれるような便利なmixin が使える。
Reset CSS
Compass では、Reset CSS を用意されている。
screen.scss ファイルが中で、reset.css を呼んでいる。 screen.scssの中を見ると以下のようになっている。
@import compass/reset
実際にコンパイルされたscreen.css を見ると、それぞれのHTML要素がリセットされている。 
compassモジュール
新しいSassファイルを作成して、Compass を使う場合、下記のように、compass モジュールを @imoortする。
@impoort compass
@impoort compass すると、以下のモジュールが使える。
- CSS3：全てのブラウザで使えるようにベンダープリフィクなどを追加してくれるmixin を提供。
- Typography：共通なタイポグラフィパターンを提供。
- Utilities：共通のスタイルパターンを提供。
以下に詳細が書いてある。
Compass Core Framework | Compass Documentation 
CSS3モジュール
CSS3モジュールのサンプルを以下に示す。
Animation
Sass
.widthup {
@include animation(kf-widthup 1s ease infinite);
}
@include keyframes(kf-widthup){
from {
width: 100px;
}
to {
width: 150px;
}
}
CSS
Appearance
外観を（ボタン）などに変更できる。 Appearance
Sass
.ap-btn {
@include appearance(button);
}
CSS
Background Clip
背景の適用範囲を指定する。 background-clip
Sass
.bg-clip {
@include background-clip();
}
CSS
Background Origin
背景の基準位置を指定する。 background-origin
Sass
.bg-origin {
@include background-origin();
}
CSS
Background Size
Sass
.bg-size {
@include background-size();
}
CSS
Border Radius
Sass
.border-r {
@include border-radius();
}
CSS
Box Shadow
Sass
.box-shadow {
@include box-shadow();
}
CSS
Box Sizing
Sass
.box-sizing {
@include box-sizing();
}
CSS
CSS3 PIE
バージョンの古いIE で動作しない border-radius などのCSS3プロパティを動作できるようにする。 別途インストールが必要だったりするので、 今回は省略。
参考リンク：
Compass CSS3PIE を動かす8個のステップ(border-radius編) | ASP.NET CShrap Sitecore – WEBYA.IN
Columns
マルチカラムレイアウトの指定。 Columns
Sass
.two-col{
@include columns(20em 2);
}
CSS
Filter
Sass
.filter-brigt-bl {
@include filter(brightness(.3) blur(4px));
}
CSS
Flexbox
Sass
.row {
@include display-flex;
@include flex-direction(row);
}
CSS
Font Face
全てのブラウザでWebフォントの指定ができる。 font-face
Sass
@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));
.example {
font-family: "Blooming Grove";
font-size: 1.2em;
}
CSS
Hyphenation
テキストの折り返しを指定。 hyphenation
- word-break参考： word-break - CSS | MDN
- hyphens参考： hyphens - CSS | MDN
Sass
.wordBreak {
@include word-break(break-all);
}
.hyphens {
@include hyphens(auto);
}
.hyphenation {
@include hyphenation;
}
CSS
Images
gradient など背景画像の指定。 Images
Sass
.with-compass {
@include background(
image-url("foo.png"),
linear-gradient(to bottom right, #333, #0c0),
radial-gradient(#c00, #fff 100px));
}
CSS
Inline Block
IE6, 7でもinline-block も使える。 inline-block
Sass
li {
@include inline-block;
}
CSS
Opacity
IE8 でもopacity が使える。 opacity
Sass
.opacity {
@include opacity(.5);
}
CSS
CSS Regions
Adobe が提案しているレイアウトである [参考 ]。
CSS Regions
CSS Regions のデモ↓
CSS Regions | Compass Documentation
Sass
#source {
@include flow-into(main-thread);
}
.region {
@include flow-from(main-thread);
background: #C5DFF0;
}
CSS
Text Shadow
compass-style.org/reference/compass/css3/text-shadow/
Sass
.shadow {
@include text-shadow();
}
CSS
Transform
Sass
.scaleup {
@include transform(scale(1.5));
}
CSS
Transition
Sass
.anime-scaleup {
@include transition(all, 1s, infinite);
}
.anime-scaleup:hover {
@include transform(scale(1.5));
}
CSS
User Interface
placeholder などのスタイルを変更を指定できる。
Sass
input[type="text"] {
@include input-placeholder {
color: #bfbfbf;
font-style: italic;
}
}
CSS
参考リンク
