Sassを使うとコードが分かりやすくなる？ – ネスト化を利用しよう

今回のエントリでは、Sass を使用するとどれくらいコードが分かりやすくなるのかを実際のソースで比較してみることにしましょう。まずは当サイトで使用しているソーシャルネットワークサービスのアイコンを見てください。サイト右上にあるアイコンですね。このように右側から順にアイコンを配置するという機能を作ります。画像は使用しませんが、 a タグをブロック化してクリックできるようにしましょう。ではまず CSS から作成します。

<div class="row_line">
    <a class="icon1" href="#"></a>
    <a class="icon2" href="#"></a>
    <a class="icon3" href="#"></a>
</div>

div.row_line {
	background-color: #292929;
	width: 400px;
	margin: auto;
	position: relative;
	height: 50px;
}

div.row_line a {
	background-color: #898989;
	display: block;
	position: absolute;
	width: 32px;
	height: 32px;
	top: 9px;
}

div.row_line a.icon1 {
	right: 91px;
}

div.row_line a.icon2 {
	right: 50px;
}

div.row_line a.icon3 {
	right: 9px;
}

……もうこんなソースコードは見たくありません。私のような未熟者には何がどうなっているのかじっくり見ないとわかりません。数値の意味もわかりません。すぐに Sass 化しましょう。 Sass で記述したソースは以下となります。

$line_width:     400px;
$backcolor_line: #292929;
$backcolor_icon: #898989;
$icon_size:      32px;
$icon_margin:    9px;
$top_grid:       50px;

div.row_line {
    background-color: $backcolor_line;
    width: $line_width;
    margin: auto;
    position: relative;
    height: $top_grid;
    a {
        background-color: $backcolor_icon;
        display: block;
        position: absolute;
        width:  $icon_size;
        height: $icon_size;
        top:    $icon_margin;
    }
    a.icon1 {
        right: $icon_margin + ($icon_size + $icon_margin)*2;
    }
    a.icon2 {
        right: $icon_margin + ($icon_size + $icon_margin);
    }
    a.icon3 {
        right: $icon_margin;
    }
}

大分すっきりして分かりやすくなったのではないでしょうか。これはネスト構造で記述できるという Sass の機能を使用しています。今までCSSでは、以下の形でしかセレクタを特定できませんでした。

div.row_line a.icon1 {
    ...
}

Sass を使用すると以下の書き方ができます。

div.row_line {
    a.icon1 {
        ...
    }
}

違いがお分かりになるでしょうか。 CSS で何度も何度も同名のセレクタをコピペしたことを思い出してください。その記述を何度も行う必要が無くなるのです。この機能は CSS に当然ながらありません。では更に以下のソースを見てください。

$line_width:     400px;
$backcolor_line: #292929;
$backcolor_icon: #898989;
$icon_size:      32px;
$icon_margin:    9px;
$top_grid:       50px;

div.row_line {
    background-color: $backcolor_line;
    width: $line_width;
    margin: auto;
    position: relative;
    height: $top_grid;
    a {
        background-color: $backcolor_icon;
        display: block;
        position: absolute;
        width:  $icon_size;
        height: $icon_size;
        top:    $icon_margin;

        &.icon1 {
            right: $icon_margin + ($icon_size + $icon_margin)*2;
        }
        &.icon2 {
            right: $icon_margin + ($icon_size + $icon_margin);
        }
        &.icon3 {
            right: $icon_margin;
        }
    }
}

ここでも Sass のある機能を使用しています。それは「＆（アンド）」です。「＆（アンド）」を使用したら親のセレクタを継いで記述することが出来るのです。そのため、「＆.icon1」と記述すると、「a.icon1」と記述していることと同じになるのです。この機能を使用すると上記例のようにセレクタをネスト化してたくさん記述することができます。他にも以下のようなことができます。アイコン部分にカーソルを合わせてみてください。色が変わります。

$line_width: 400px;
$backcolor_line: #292929;
$backcolor_icon: #898989;
$icon_size:      32px;
$icon_margin:    9px;
$top_grid:       50px;

div.row_line {
    background-color: $backcolor_line;
    width: $line_width;
    margin: auto;
    position: relative;
    height: $top_grid;

    // アイコン表示
    a {
        background-color: $backcolor_icon;
        display: block;
        position: absolute;
        
        width: $icon_size;
        height: $icon_size;
        top: $icon_margin;
       
        &.icon1 {
            right: $icon_margin + ($icon_size + $icon_margin)*2;
            &:hover { background-color: blue; }
        }
        
        &.icon2 {
            right: $icon_margin + ($icon_size + $icon_margin);
            &:hover { background-color: yellow; }
        }
        
        &.icon3 {
            right: $icon_margin;
            &:hover { background-color: red; }
        }
    }
}

この機能も、「＆（アンド）」を利用していますね。さらに一つネストを深くして、「a.icon1:hover」と同等の記述をしています。CSSを利用している方！ Sass を利用しましょう！