[Compass,Utilitiesモジュール]ちょっと便利なUtilitiesモジュールの使い方

css, Sass, Compass

今日はちょっと便利なUtilitiesモジュールのお勉強をみんなとやってみたいと思うよ！
リンクの色とかclearfixなんかもUtilitiesモジュールを使えば簡単カルカルー！

clearfix 回り込みの解除

Sass
1
2
3
.clearfix {
    @include clearfix;
}

↓↓↓コンパイル後↓↓↓

CSS
1
2
3
4
.clearfix {
  overflow: hidden;
  *zoom: 1;
}

legacy-pie-clearfix

Sass
1
2
3
.clearfix {
    @include legacy-pie-clearfix;
}

↓↓↓コンパイル後↓↓↓

CSS
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

Sass
1
2
3
.clearfix {
    @include pie-clearfix;
}

↓↓↓コンパイル後↓↓↓

CSS
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

Sass
1
2
3
.hogeN {
    @include link-colors(#000,#111,#222,#333,#444);
}

↓↓↓コンパイル後↓↓↓

CSS
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とか都度入力するの面倒くさいので、これまた便利ですね。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

, , , 下山 光揮

スポンサーリンク