compass
Compassで画像のパスを自動出力する
Compassの「image-url」関数を使うことで、長い画像の参照パスを意識することなくCSSコーディングすることができます。 まずCompassの設定ファイル（config.rb）に下記設定があることを前提とします…Compass(Sass)で特定種類の要素を一括スタイル指定する
Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。 Sass記述 #{elements-of-t…Compass(Sass)で見出しタグを一括スタイル指定する
Compassにはh1～h6の見出し用タグを一括して処理する関数があります。 Sass記述 #{headings()} { display: inline-block; } #{headings(4)} { //h1から…Compass(sass)でリセットCSSを楽に書く
ブラウザ標準のスタイルをリセットするためのCSSをCompassで一発で出力することができます。 Sass記述 1行書くだけです。 @include global-reset; 出力CSS 下記CSSがドバッと出力され一…CSS3の新プロパティ「columns」
名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 10…Compass(sass)でCSSグラデーションを楽に書く
CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。Compassで用意されている標準mixinを使うことで一括で出力できます。 Sassの記述は下記になります。 $re…Compass(Sass)でテキスト省略（ellipsis）を楽に書く
テキストが一定幅に収まらなかった場合「…」と省略するCSS手法に text-overflow:ellipsis を使う方法がありますが、Compassの記述を使えば一行でクロスブラウザ対応まで済ませます。 Sass側の記…