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;
※プレースホルダー：挿入ポイントには、画像のファイル名を入れます。

コンパイル結果

``