今日はちょっと便利なUtilitiesモジュールのお勉強をみんなとやってみたいと思うよ!
リンクの色とかclearfixなんかもUtilitiesモジュールを使えば簡単カルカルー!
clearfix 回り込みの解除
1 2 3 |
.clearfix { @include clearfix; } |
↓↓↓コンパイル後↓↓↓
1 2 3 4 |
.clearfix { overflow: hidden; *zoom: 1; } |
legacy-pie-clearfix
1 2 3 |
.clearfix { @include legacy-pie-clearfix; } |
↓↓↓コンパイル後↓↓↓
1 2 3 4 5 6 7 8 9 10 11 |
.clearfix { *zoom: 1; } .clearfix:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } |
pie-clearfix
1 2 3 |
.clearfix { @include pie-clearfix; } |
↓↓↓コンパイル後↓↓↓
1 2 3 4 5 6 7 8 |
.clearfix { *zoom: 1; } .clearfix:after { content: ""; display: table; clear: both; } |
この3パターンをどう使い分けるかなんですが、ぶっちゃけボクは何も考えずにpie-clearfixを使ってました。
色々ググった結果、まとめてらっしゃる方がいましたのでリンクを貼っときます。
deadwood様 [Sass & Compass] Compass: mixin から clearfix を学ぶ
リンクカラー link-color
1 2 3 |
.hogeN { @include link-colors(#000,#111,#222,#333,#444); } |
↓↓↓コンパイル後↓↓↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.hogeN { color: #000; } .hogeN:visited { color: #333; } .hogeN:focus { color: #444; } .hogeN:hover { color: #111; } .hogeN:active { color: #222; } |
ご覧のとおり(link,hover,active,visited,focus)の順番で省略するごとに後ろのfocusから省略されます。
まとめ
リンクの色とかclearfixとか都度入力するの面倒くさいので、これまた便利ですね。