Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう

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

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value: 5px) {
	-webkit-border-radius: $value;
	   -moz-border-radius: $value;
	    -ms-border-radius: $value;
         -o-border-radius: $value;
	        border-radius: $value;
}
/*----------------------------------------------------------
アニメーション
----------------------------------------------------------*/
@mixin transition($change: "background-color") {
    -webkit-transition: #{$change} 0.2s linear;
       -moz-transition: #{$change} 0.2s linear;
        -ms-transition: #{$change} 0.2s linear;
         -o-transition: #{$change} 0.2s linear;
            transition: #{$change} 0.2s linear;
}
/*----------------------------------------------------------
hover
----------------------------------------------------------*/
@mixin hover($property: "background-color", $value: "green") {
    &:hover { #{$property}: #{$value};  }
}
@mixin hover_bc($value: "green") {
    @include hover("background-color", $value);
}

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

/***********************************************************
マークアップ
***********************************************************/
div.row_line {
    background-color: $backcolor_line;
    width: $line_width;
    margin: auto;
    height: $top_grid;
    position: relative;
    
    // アイコン表示
    a {
        background-color: $backcolor_icon;
        display: block;
        position: absolute;
        
        width: $icon_size;
        height: $icon_size;
        top: $icon_margin;
        
        @include border_radius();
        @include transition();
        
        &.icon1 {
            right: $icon_margin + ($icon_size + $icon_margin)*2;
            @include hover_bc("blue");
        }
        
        &.icon2 {
            right: $icon_margin + ($icon_size + $icon_margin);
            @include hover_bc("yellow");
        }
        
        &.icon3 {
            right: $icon_margin;
            @include hover_bc("red");
        }
    }
}

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