WebデザイナーがCoda2にクリップしているCompassのmixinとかをまとめてみました

作業メモです。
追々、追記していきます。

Compassをインポート

まずは、Compassをインポートします。
@import "compass"; @import "compass/reset"; @import "compass/layout";
※resetはリセットCSSのモジュール。必要に応じてインポートする
※layoutはレイアウト系のモジュール。こちらも必要に応じて

[mixin]clearfix

floatの回り込みを解除するときに使います。
@include clearfix;

コンパイル結果

overflow: hidden; *zoom: 1;

[mixin]角丸(CSS3)

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

コンパイル結果

-webkit-border-radius: 角丸の半径; -moz-border-radius: 角丸の半径; -ms-border-radius: 角丸の半径; -o-border-radius: 角丸の半径; border-radius: 角丸の半径;

[mixin]inline-block

コンテンツを横並びにします。
@include inline-block;

コンパイル結果

display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline;

[mixin]不透明度(0.0〜1.0)

@include opacity(プレースホルダー：挿入ポイント);

コンパイル結果 （以下は0.6を入れた場合の結果）

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;

[mixin]文字の省略符号

@include ellipsis;

コンパイル結果

``

[Helpers]画像サイズ取得　Image Dimension Helpers

width: image-width("プレースホルダー：挿入ポイント"); height: image-height("プレースホルダー：挿入ポイント");
※プレースホルダー：挿入ポイントには、画像のファイル名を入れます。

コンパイル結果

``

[Helpers]画像パス補完　URL Helpers

background: image-url("プレースホルダー：挿入ポイント") top left no-repeat;
※プレースホルダー：挿入ポイントには、画像のファイル名を入れます。

コンパイル結果

``