Sassで角丸の矩形を超簡単に記述する方法

いきなりですが、Sassのソースと実行結果を見てみましょう。

/*--------------------------------------------
 サイト全体
--------------------------------------------*/
body {
    background-color: $main_color;
}
div#container {
    background-color: $sub_color;
    width: $container_width;
    margin: auto;
    margin-top: $one_grid;

    // 角丸
    @include border_radius();

    // 内容がないので高さを指定する
    height: 10 * $one_grid;
}

なんと一行で角丸の矩形を描画させています。このように記述を省略できる書き方ができるのもSassの大きな魅力の一つとなります。では以下に種明かしのソースを記載します。

// パラメータ
$one_grid:                30px;
$all_grid_partition_num:  20;

// サイズ
$container_width:        $all_grid_partition_num * $one_grid;

// design
$main_color:         #B7EA99;
$sub_color:          #ECFCE2;

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value: 20px) {
	-webkit-border-radius: $value;
	   -moz-border-radius: $value;
	    -ms-border-radius: $value;
	        border-radius: $value;
}

/*--------------------------------------------
 サイト全体
--------------------------------------------*/
body {
    background-color: $main_color;
}
div#container {
    background-color: $sub_color;
    width: $container_width;
    margin: auto;
    margin-top: $one_grid;

    // 角丸
    @include border_radius();

    // 内容がないので高さを指定する
    height: 10 * $one_grid;
}

mixinという処理は、ひとまとまりの処理をまとめることができます。CSSで角丸の矩形を描画するたびに角丸のプロパティのコピー＆ペーストをしていたことでしょう※1。このmixinを利用すると一行で書けてしまいます。しかも、処理をまとめるだけではありません。以下に示すようにSassのソースコードを修正してみます。

div#container {
    background-color: $sub_color;
    width: $container_width;
    margin: auto;
    margin-top: $one_grid;

    // 角丸
    @include border_radius(50px);

    // 内容がないので高さを指定する
    height: 10 * $one_grid;
}

角丸の大きさが変更されているのがお分かりになるでしょうか。はじめに記載していた処理では（）の中身はありませんでしたが、今回は指定しています。このように渡す値を指定できるようmixinを作成しているので、より汎用的に処理がまとめられるのです。このmixinを利用することでコピー＆ペーストをする必要がなくなり、CSSと比較するとソースコードが見やすくなります。可読性が上がれば修正の時間も短縮できますし、mixinの内容を修正すると角丸を利用している箇所全てに反映されるため、ミスによる修正時間の浪費も無くなっていくでしょう。いいことばかりですね。

※1：HTMLで角丸のプロパティを記載したclassを指定する方法もあります。しかし、基本的に見栄えに関する内容はCSSに記載しよう、というWEB標準の考えに沿っているため比較対象に含んでいません。