テスト用の表示や遊び心で図形を描きたい、ということがたまにあります。そんな時にお絵かきソフトを使わずに CSS で図形を書くことはないでしょうか？わざわざ Photoshop を開くのも面倒だと感じてしまう方！ Sass でさっと図形を書いてしまいましょう。
　

　

一行で描いてしまう

いきなりですが、以下のソースを見てください。これは正方形を描く関数です。

div.sample { @include square(); }

今回の作る関数を利用すれば、上記のように一行で図形が描けます。これなら面倒なのもかなり軽減するのではないでしょうか。

実装方法

それでは実装部分を見てみましょう。

/*----------------------------------------------------------
デフォルト値
----------------------------------------------------------*/
$DEFAULT_SIZE: 50px !default;
$DEFAULT_COLOR: #FF0000 !default;

/*----------------------------------------------------------
正方形
----------------------------------------------------------*/
@mixin square(
    $size: $DEFAULT_SIZE,
    $color: $DEFAULT_COLOR) {

    width: $size;
    height: $size;
    background: $color;
}

これが正方形を描くためのライブラリとなります。これだけでも十分な気がしますが、もう少し改良してみましょう。今までに作成した CSS3 をオーバーラップした transition 関数を使います。 hover 時に transition を用いてアニメーションしながら色が変わっていくようにしてみましょう。

/*----------------------------------------------------------
デフォルト値
----------------------------------------------------------*/
$DEFAULT_SIZE: 50px !default;
$DEFAULT_COLOR: #FF0000 !default;

$INI_HOVER_COLOR: #00FF00;
$HOVER_COLOR:     #00FF00 !default;
$HOVER_COLOR_ANIM_SPEED: 0.2s !default;

/*----------------------------------------------------------
正方形
----------------------------------------------------------*/
@mixin square(
    $size: $DEFAULT_SIZE,
    $color: $DEFAULT_COLOR) {

    width: $size;
    height: $size;
    background-color: $color;

    // hover時のアニメーション
    @include transition(background-color $HOVER_COLOR_ANIM_SPEED linear);

    // hover時の動作設定は@contentで拡張する
    &:hover {
        @content;
        background-color: $HOVER_COLOR;

        // 初期化
        $HOVER_COLOR: $INI_HOVER_COLOR;
    }
}

デフォルトのままだと、赤から緑に色が変わります。少し味気ないので、拡張した呼び出し方をみてみましょう。

div.sample  {
    @include square(80px, blue) {
        $HOVER_COLOR: orange;
    }
}

このように書くと、80 px の大きさの正方形が青からオレンジ色に変わっていきます。 @content を使うとこのように関数自体を拡張することができます。便利ですね。 @content の詳しい解説については「Sassの@contentの使い道とは？ – @contentの実験と結果」にて行なっています。

また、今回は少し楽をするために今まで作成してきた CSS3 をオーバーラップしたライブラリを使用しています。これは、「 -webkit- 」などを自分で記述しなくていいように自動でやってくれるようにしたものです。 CSS3 をオーバーラップするライブラリの作成方法については「Sassで未対応ブラウザへのCSS3使用は警告＆自動修正！」を参考にしてみてください。

作った図形一覧

正方形

div.sample1  { @include square(); }

四角(矩形)

div.sample2  { @include rect(); }

円

div.sample  { @include circle(); }

楕円

div.sample  { @include oval(); }

三角形 – 左向き

div.sample  { @include triangleLeft(); }

div.sample  { @include triangleLeftMini(); }

三角形 – 下向き

div.sample  { @include triangleBottom(); }

三角形 – 右向き

div.sample  { @include triangleRight(); }

div.sample  { @include triangleRightMini(); }

三角形 – 上向き

div.sample  { @include triangleUp(); }

三角形 – 左上向き

div.sample  { @include triangleUpLeft(); }

三角形 – 左下向き

div.sample  { @include triangleBottomLeft(); }

三角形 – 右下向き

div.sample  { @include triangleBottomRight(); }

三角形 – 右上向き

div.sample  { @include triangleUpRight(); }

台形

div.sample  { @include trapezoid(); }

サンプル

実際に動作させてみたサンプルです。コードも見れるので是非いじって遊んでみてください。

最後に

今回のエントリーも含めて、 github にて公開していますので是非使ってみてください。