Sass
Sass（SCSS）のmixinを利用して角丸指定を楽にする
Sassを利用してcssを記述する場合あらかじめ下記のようにmixinを設定しておくと、後で指定が楽になります。 @mixin border-radius($radius) { -webkit-border-radius…Compassで画像のパスを自動出力する
Compassの「image-url」関数を使うことで、長い画像の参照パスを意識することなくCSSコーディングすることができます。 まずCompassの設定ファイル（config.rb）に下記設定があることを前提とします…Sassの@extendでclearfixを使いまわす
CSSで多用される、レイヤー内でのfloat解除するためのclearfixですが、通常だと下記のようにレイヤーごとにclearfixクラスを付与させるケースが多いと思います。 <div class="bo…Sassを使ってCSSクラスをバージョン分けする
HTMLには手を入れずCSSだけでデザイン変更を行う場合、対象のCSSクラスを編集することになりますが、Sassで記述することで作業効率が上がるのでその方法を紹介します。 たとえば既存のCSSを下記とします。 .navi…Compass(Sass)で特定種類の要素を一括スタイル指定する
Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。 Sass記述 #{elements-of-t…Compass(sass)でCSSグラデーションを楽に書く
CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。Compassで用意されている標準mixinを使うことで一括で出力できます。 Sassの記述は下記になります。 $re…Compass(Sass)でテキスト省略（ellipsis）を楽に書く
テキストが一定幅に収まらなかった場合「…」と省略するCSS手法に text-overflow:ellipsis を使う方法がありますが、Compassの記述を使えば一行でクロスブラウザ対応まで済ませます。 Sass側の記…