scssでmixinを作ってみた

初めまして。寺岡です。

普段はRailsと戯れるお仕事をしています。
今回はscssでタブバーを表現するmixinを作ってみました。

scssって何？

scssはRails3.1から標準搭載された機能で、既存のcssと互換性が高い文法で記述できます。
scssはサーバサイドで解釈され、ブラウザに送信される際はcssとして出力されますので、ブラウザ側で新たに対応する必要がない、などの特徴があります。
scssを利用すると、変数やmixinと呼ばれる部分テンプレートを駆使した再利用性の高いスタイルを記述できます。

rails-compassのインストール

まずは、rails-compassというgemをインストールします。
Compassはscss(sass)を利用する上で非常に便利で汎用的なmixin等を提供してくれるライブラリです。
http://compass-style.org/
今回のサンプルでは、クロスブラウザ対応したグラデーション、box-shadow、border-radiusなどに利用しました。
非常に便利なライブラリなので、scssを利用する場合は是非インストールしてみてください。
インストール方法は、Gemfileにgem "rails-compass"を追記し、bundle installを実行するだけです。

application.cssでscssを使う

まずは、app/assets/stylesheets/application.cssをapp/assets/stylesheets/application.css.scssにリネームします。
これだけでscssが利用できるようになります。
今回はapplication.css.scss以外のファイルはscssの@import構文を利用してインポートしますので、
*= require_self
*= require_tree .
の指定は削除しておきます。

tab-bar.css.scssの作成

scssを利用する準備が整ったところで、本題のapp/assets/stylesheets/tab-bar.css.scssを作成します。
以下がtab-bar.css.scssのコードです。

@import "compass";

%clearfix {
  *zoom: 1;
  :before,
  :after {
    display: block;
    height: 0;
    visibility: hidden;
    content: "\0020";
  }

  :after {
    clear: both;
  }
}

$DEFAULT_RADIUS: 5px !default;
@mixin row-top-radius($radius: $DEFAULT_RADIUS) {
  :first-child {
    @include border-top-left-radius($radius);
  }
  :last-child {
    @include border-top-right-radius($radius);
  }
  :only-child {
    @include border-top-radius($radius);
  }
}

@mixin tab-bar($color: #ccc, $radius: $DEFAULT_RADIUS) {
  $border_color: darken($color, 10);
  $highlight_color: lighten($color, 50);
  $contrast-color: contrast-color(darken($color, 30));
  @extend %cliearfix;
  display: table;
  border: 1px solid $border_color;
  @include border-top-radius($radius);
  @include box-shadow(0 1px 1px $border_color);
  a {
    @include link-colors($contrast-color);
    text-decoration: none;
  }
  > * {
    color: $contrast-color;
    padding: 0.2em;
    display: block;
    float: left;
    border-top: 1px solid $highlight_color;
    border-left: 1px solid $border_color;
    border-right: none;
    background-color: $color;
    @include background(linear-gradient(center top , lighten($color, 30), $color));
  }
  > *:hover {
    background-color: lighten($color, 50);
    @include background(linear-gradient(center top , lighten($color, 50), lighten($color, 20)));
  }
  > :first-child {
    border-left: none;
  }
  @include row-top-radius($radius);
}

@import "compass";

%clearfix {

*zoom: 1;

:before,

:after {

display: block;

height: 0;

visibility: hidden;

content: "\0020";

}

:after {

clear: both;

}

$DEFAULT_RADIUS: 5px !default;

@mixin row-top-radius($radius: $DEFAULT_RADIUS) {

:first-child {

@include border-top-left-radius($radius);

}

:last-child {

@include border-top-right-radius($radius);

}

:only-child {

@include border-top-radius($radius);

}

@mixin tab-bar($color: #ccc, $radius: $DEFAULT_RADIUS) {

$border_color: darken($color, 10);

$highlight_color: lighten($color, 50);

$contrast-color: contrast-color(darken($color, 30));

@extend %cliearfix;

display: table;

border: 1px solid $border_color;

@include border-top-radius($radius);

@include box-shadow(0 1px 1px $border_color);

a {

@include link-colors($contrast-color);

text-decoration: none;

}

> * {

color: $contrast-color;

padding: 0.2em;

display: block;

float: left;

border-top: 1px solid $highlight_color;

border-left: 1px solid $border_color;

border-right: none;

background-color: $color;

@include background(linear-gradient(center top , lighten($color, 30), $color));

}

> *:hover {

background-color: lighten($color, 50);

@include background(linear-gradient(center top , lighten($color, 50), lighten($color, 20)));

}

> :first-child {

border-left: none;

}

@include row-top-radius($radius);

}

tab-bar mixinを利用してみる

htmlは以下のようにしました。
クラス名やタグなどが非常にシンプルな構成です。

<div class="tab-bar1">
  <a href="#">メニュー1</a>
  <a href="#">メニュー2</a>
  <a href="#">メニュー3</a>
  <a href="#">メニュー4</a>
  <a href="#">メニュー5</a>
</div>

<div class="tab-bar2">
  <a href="#">メニュー1</a>
  <a href="#">メニュー2</a>
  <a href="#">メニュー3</a>
  <a href="#">メニュー4</a>
  <a href="#">メニュー5</a>
</div>

<div class="tab-bar3">
  <a href="#">メニュー1</a>
  <a href="#">メニュー2</a>
  <a href="#">メニュー3</a>
  <a href="#">メニュー4</a>
  <a href="#">メニュー5</a>
</div>

<navi>
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
    <li><a href="#">メニュー5</a></li>
  </ul>
</navi>

</div>

</div>

</div>

<navi>

<ul>

</ul>

</navi>

application.css.scssに記述するコードは以下です。
@import "tab-bar"; で上記で定義したscssをインポートし、
@include tab-bar; で定義したミックスインを組み込むことができます。
@include tab-bar(#ccc);のように引数を渡すこともできます。

@import "tab-bar";
.tab-bar1 {
  margin: 10px;
  @include tab-bar;
}

.tab-bar2 {
  margin: 10px;
  @include tab-bar(#00f);
}

.tab-bar3 {
  margin: 10px;
  @include tab-bar(#f00);
}

navi ul {
  margin: 10px;
  padding: 0;
  @include tab-bar(#000);
}

@import "tab-bar";

.tab-bar1 {

margin: 10px;

@include tab-bar;

}

.tab-bar2 {

margin: 10px;

@include tab-bar(#00f);

}

.tab-bar3 {

margin: 10px;

@include tab-bar(#f00);

}

navi ul {

margin: 10px;

padding: 0;

@include tab-bar(#000);

}

これで、以下のようなカラフルなタブバーの出来上がりです！！

まとめ

scssを利用すると、再利用可能なスタイルを定義することができるので、
mixinを一度記述してしまえば、他のプロジェクトでそのまま利用することが可能です。
山のようなクラス定義を書く必要がなくなりますので、scssを使っていると自然とシンプルなHTMLになっていきます。
汎用的なmixinを作るのは大変ですが、労力以上の効果が体感できると思いますので、一度お試しください！