Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう
はてなブックマーク - Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう
Pocket

前回のエントリで「Sassを使うとコードが分かりやすくなる? – ネスト化を利用しよう」を書きましたが、今回はCSS3を利用してhover時のアニメーションや、角丸、hover自体の記述をmixin化してまとめてしまいます。記述をまとめてしまうことでコピー&ペーストが減るので楽ができますね。では早速以下のソースを見てみましょう。

上記のSassのソースコードは、角丸、アニメーション、ホバー時のCSS3の記述をまとめたものです。これを以下のソースのように使用します。

mixinの使い方は「Sassで角丸の矩形を超簡単に記述する方法」にて記述しています。しかし、hover_bc()関数の定義の上にあるhover()関数に注目してください。「#{…}」という妙な記載がされていることに気がついたでしょうか。この記述方法はインターポレーションと言います。名称は覚えなくていいですが、効果は「セレクタやプロパティ名自体に変数が使える」という強力なものです。この機能を使うことで、「:hover {…}」という記載自体をmixin化しています。更によく使う背景色の変更をhover_bc()関数として宣言しているため、簡単にホバー時に色を変えられるようにしてみました。便利すぎる!