背景
適⽤範囲
画像
サイズ
⾓丸
@include border-radius(5px);
@include background-clip(border-box);
@include background-size($width $height);
エリア
Clearfix
新
@include clearfix;
inline-block
⾊
@include legacy-pie-clearfix;
@include inline-block;
最⼩最⼤サイズ
リンク⾊
旧
⾼
幅
@include min-width($width);
@include max-width($height);
@include link-colors($hover, $active, $visited, $focus);
グラデー
ション
透明度
線
@include background(linear-gradient($start-color, $end-color));
円
@include background(radial-gradient($start-color, $end-color));
@include opacity(0.5);
テキスト影
@include text-shadow(px px px $color);
影
エリア影
@include box-shadow(px px px $color);
inline系横並びリスト
リスト
float系横並びリスト
リストアイコン
@include inline-block-list($pad);
@include inline-list;
@include horizontal-list($pad, $direction: left);
@include pretty-bullets("ico.png");
Compass
Cheet Sheet
改⾏
改⾏する
⾏間サイズ
改⾏しない
@include establish-baseline;
⽂字上下
@include nowrap;
$base-font-size:■px; $base-line-height:■px;とセット
@include rhythm ($mgn-top,$pad-top,$pad-btm,$mgn-btm);
スペース
⽂字
@include force-wrap;
⽂字不可視
@include hide-text;
⽂字不可視
@include replace-text("img.png", $x, $y);
＋背景画像
@include replace-text-with-dimensions("img.png", $x, $y);/* width,height有 */
領域からはみ出た場合に「...」を表⽰
Webフォント
パス
display:blockとセット
@include ellipsis;
width: とセット
@include font-face($fontname, font-files("hogeA.ttf", "hogeB.otf", "hogeC.eot"));
background-image: image-url("$img");
画像
サイズ
関数
⾊
width : image-width("$img"); height : image-height("$img");
＋明度
color: adjust-lightness($color, $amount);
＋彩度
color: adjust-saturation($color, $amount);
＋⽩
color: tint($color, %);
＋⿊
ネスト
#{nest(".class1, .class2", "ul, ol")} {;}
種類別
#{elements-of-type($display)} {;}
adjust ⇔ scale
(絶対値⇔相対値）
shade($color, %);
.class1 ul, .class1 ol, .class2 ul, .class2 ol
block / inline / table-cell / html5-block etc..
© @mothership http://mothershipweb.jp/

スタイルシート - Webデザインの基礎