Utilitiesモジュール-リンクカラー

Compass

Utilitiesモジュールは色、レイアウト、クロスプラウザ対応のミックスインを中心としたモジュール。

link-colors-リンクカラー

link-colors(color,:hover,:active,:visited,:focus);


SCSS

#menu li{
@include link-colors(red,blue,green,orange,black);
}



css(コンパイル後)

#menu li {
  color: red;
}
#menu li:visited {
  color: orange;
}
#menu li:focus {
  color: black;
}
#menu li:hover {
  color: blue;
}
#menu li:active {
  color: green;
}



clearfix-クリアフィックス

scss

.cf { 
@include clearfix;
}



css(コンパイル後)

.cf {
  overflow: hidden;
  *zoom: 1;
}


インラインリスト

メニューバーで良く使われる「li」タグを横並びにするミックスインが3種類あります。
どのミックスインもコンパイル後に自動的に「li」セレクタが付与されるので、親タグである
「ul」か「ol」を指定する。

inline-list

scss

#menu ul{
@include inline-list;
}



css(コンパイル後)

#menu ul {
  list-style-type: none;
}
#menu ul, #menu ul li {
  margin: 0px;
  padding: 0px;
  display: inline;
}
inline-block-list

scss省略

css(コンパイル後)

#menu ul {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
}
#menu ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
}



horizontal-list

scss省略
css(コンパイル後)

#menu ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
}
#menu ul li:first-child, #menu ul li.first {
  padding-left: 0;
}
#menu ul li:last-child {
  padding-right: 0;
}
#menu ul li.last {
  padding-right: 0;
}