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

