コードを分かりやすく、見やすく、短くするためにSassの機能を使ってきました。アイコンを並べるという単純なコードですが、CSSのままより改良の余地がまだまだあることを知っていただければSassの強みも分かって頂けるかと思います。ではアイコンを並べる処理を更に改良していきましょう。今までのアイコンを並べる記事は以下になります。
「Sassを使うとコードが分かりやすくなる？ – ネスト化を利用しよう」
「Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう」

ループを実装する – @eachを使う

それではまず以下のソースを見てください。これは前回まで使用してきたベンダープレフィックスを@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 border_radius($value: 5px) {
    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
        #{$prefix}border-radius: $value;
    }
}

詳しく見てみましょう。5行目で@eachという見慣れない構文が使われていますね。これがループ処理です。@eachに続く$prefixという変数に「-webkit-」という文字を入れ込んで、6行目の処理を行なっています。次に「-moz-」という文字を入れ込み6行目の処理、「-ms-」という文字を入れ込んで6行目の処理、と繰り返して最後の空の文字である「”」を入れ込んで6行目の処理を行なっています。この繰り返し処理が@eachで出来ているのです。また、以下のように入れ込む文字を変数にしても同じようにループ処理ができます。

$default_prefix: -webkit-, -moz-, -ms-, -o-, '';
/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value: 5px) {
    @each $prefix in $default_prefix {
        #{$prefix}border-radius: $value;
    }
}

こうやって外部に変数として用意することができるので、パラメータとしてファイル上部に設置することができます。では中身の処理で何をやっているのかを説明したいと思います。#{…}というのはインターポレーションと言うものです。「Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう」でも説明していますが、効果は「セレクタやプロパティ名自体に変数が使える」というものです。#{…}を使うことで「-webkit-」と「border-radius」をくっつけて「-webkit-border-radius」が出来上がります。繰り返し処理を行なっているので、全てのベンダープレフィックスがこの三行で準備できてしまいます。

ループを実装する – @forを使う

@each以外に、@forというループ処理を行う機能もあります。ではまず、今までのアイコンを並べる処理を見てみましょう。

/***********************************************************
マークアップ
***********************************************************/
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");
        }
    }
}

ネスト化されているのでこれでもかなり分かりやすくなっていますね。しかしまだまだ改良の余地はあります。アイコンを並べている箇所は同じような記述が並んでいるのでループ化できそうです。ループ化している最中のコードを見てみましょう。

        @for $i from 1 through 3 {
            &.icon#{$icon_num} {
                right: 【並べて設置できるよう計算したい】
                @include hover_bc(【青、黄色、赤で表示したい】);
            }
        }

@forは@eachと違い、数字をfromからthroughまで繰り返します。その数値は$iに格納され、ループ処理内で自由に使うことができます。アイコンのクラス名が「.icon2」と最後が数値になっているのでそのまま$iを使っています。中身の処理はまだできていませんが、iconクラスを1から3まで作ることはこのコードで出来るようになりました。では中身の処理を作って行きましょう。

        $icon_num: 3;
        $icon_color: "red", "yellow", "blue";
        @for $i from 1 through 3 {
            &.icon#{$icon_num} {
                right: $icon_margin + (($icon_size + $icon_margin)*($i - 1));
                @include hover_bc(nth($icon_color, $i));
            }
            $icon_num: $icon_num - 1;
        }

クラスの中身である、アイコンの位置を決定する処理はmarginとicon_sizeで計算できます。次にアイコンの色です。アイコンの色は予め「$icon_color」という変数に「,(コンマ)」区切りで入れています。区切った変数の一つ一つにアクセスしたい場合は、「nth(“変数名”, “何番目か”)」という関数を使うとできます。これで「$i」を使って赤、黄色、青が順番に取り出せますね。

　

ループ処理は以上で終わりです。当初の目的であるコードの短縮はできました。コードを短くすることで一見分かりにくいと思われた方もいるかと思います。これは慣れの問題なのです。慣れれば冗長的な記述より分かりやすくなります。短ければ短いほど一行の重みは大きくなり、本質を見誤ったコードの書き方にも気づきやすくなります。もっとシンプルに、もっと短くコードを書くように心がけていきたいものです。