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のコードです。

tab-bar mixinを利用してみる

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

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

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

まとめ

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

Comments are closed, but you can leave a trackback: Trackback URL.