こんにちは、TANE-beエンジニアです。
Webサイトを実装していると、背景にドットやチェックといったパターンを繰り返し使用することも多いのではないでしょうか？
今回は、色・サイズを変更しながら使いまわせる、チェック模様・ドットをSCSSで実装し、コピペでも使えるようにしております。

1色だけであればパターン画像を書き出して『background-repeat: repeat;』 で敷き詰めても良いですが、他の箇所で別の色のパターンを使用したり、hover時に色が変わる処理をしたい場合などは、CSSで対応できればスムーズで、修正などの更新性も良くなります。
そこで今回はSCSSの@mixin(ミックスイン)を使用しつつ色やサイズの変更にも対応できる背景パターンを作成していきたいと思います！

@mixinとは

まず、mixinについて説明します。
mixinは簡単に言えば、よく使用するスタイルを定義して使いまわせるようにする機能のことです。
変数と似た機能のように思えますが、値を使用先に引き渡して、それぞれ設定できるという便利な特徴があります。

今回はまずパターンをcssで作成し、使用先で色やサイズを変更できるようにしたいのでmixinを使用します。

ドットの背景パターンを作る

さて、まずはドットを作成しましょう。
ドットはグラデーションの『radial-gradient』を使用します。
今回、radial-gradientの説明は割愛いたしますので、詳細に知りたい方は以下のページなどをご参考ください。
radial-gradientとは？

背景を設定したい箇所に、以下のようにスタイルを設定します。

@mixin bg_dot{
	background-image: radial-gradient(#fff 40%, #ddd 45%);
	background-size: 10px 10px;
}
.dot{
	@include bg_dot();
}

bg_dotというのはこのmixinの名前です。
使い回す時にわかりやすい命名にしておくと良いです。
そして.dotとクラスがついた要素に対して、bg_dotで設定したスタイルを呼び出しています。
さて、この時点でどのようなスタイルが当たるか確認しましょう。
この時点では白とグレーのドットが繰り返されています。

これは@mixin bg_dotで設定しているcssが.dotのクラスがついた要素に当たっているからです。

グラデーションを40%,45%でずらしているのは、小さなサイズだと同じ値にすると四角く見えてしまうことがあり、若干の幅を持たせたほうが綺麗な丸に見えるからです。（ここはサイトに反映されるスタイルを確認しつつ調整すると良いです）

さて、では色とサイズを変更できるようにしましょう。

@mixin bg_dot( $size: 10px, $dot: #fff, $bg: #ddd ){
	background-image: radial-gradient($dot 40%, $bg 45%);
	background-size: $size $size;
}
.dot{
	@include bg_dot();
}

上記のように、各プロパティで設定していた箇所をbg_dotの引数に割り当て、cssには引数名を入れます。
この状態でどのように見えるか確認します。
先ほどと同じ白とグレーのドット模様が表示されていればOKです。

では、いよいよ色やサイズを変更していきましょう。

// サイズを大きく
.dot.large{
	@include bg_dot($size:20px);
}

//ドットの色を変更する
.dot.colorChange{
	@include bg_dot(10px,rgba(#fff,.5),#FBCA5A);
}

引数を変更することでサイズや色の変更が簡単にできるようになりました。
上記のように、変更したい引数だけ指定することも、すべてまとめて指定することもできます。
個別で指定した場合は、それ以外の値は@mixin bg_dotで設定した値が入ります。

うまく実装できたでしょうか？

チェックの背景パターンを作る

さて、次はチェックの背景パターンを作成しましょう。
先ほどは円形のグラデーションを使用しましたが、今回は『linear-gradient』を使用します。
今回『linear-gradient』の説明は割愛しますので、詳細に知りたい方は以下のページなどをご参考ください。
radial-gradientとは？

さて、まずはチェックのパターンを作成します。
背景を設定したい場所に以下のようにスタイルを設定します。

@mixin bg_check{
	background-size: 21px 21px;
	background-color: #fff;
	background-image:
		linear-gradient(0deg, transparent 50% ,#000 50% ,#000 calc(50% + 1px) ,transparent calc(50% + 1px)),
		linear-gradient(90deg, transparent 50% ,#000 50% ,#000 calc(50% + 1px) ,transparent calc(50% + 1px));
}
.check{
	@include bg_check();
}

まずはサイズを指定し、グラデーションで線を作ります。
上記は50%の時点まで透明、50%から50%+1pxの時点までは#000、そこから最終点までは透明というグラデーションを作っています。
そのグラデーションを2つ作り、0度、90度で重ねることでチェックにしています。
先ほどまでは背景色もグラデーションで設定していましたが、今回は2つのグラデーションを重ねた時に背景色で下になるグラデーションが隠れてはいけないので、グラデーションでは透明を使用し、background-colorのプロパティで背景色を設定します。

ボーダーの幅を変更したい場合は、linear-gradientの1pxに当たる箇所の数値を変更します。

ではドットの時と同じように、それぞれを引数として設定しましょう。

@mixin bg_check($size: 21px,$bg: #fff,$line: #000) {
	background-size:  $size $size;
	background-color: $bg;
	background-image:
		linear-gradient(0deg, transparent 50% ,$line 50% ,$line calc(50% + 1px) ,transparent calc(50% + 1px)),
		linear-gradient(90deg, transparent 50% ,$line 50% ,$line calc(50% + 1px) ,transparent calc(50% + 1px));
}
.check{
	@include bg_check();
}

この時点では白黒のチェックが表示されていればOKです。

では、色やサイズを変えていきましょう。

// サイズを大きく
.check.large{
	@include bg_check($size: 60px);
}

// 色を変更する
.check.colorChange{
	@include bg_check(21px,#FBCA5A,#fff);
}

// 色とサイズを変更する
.check.colorChange02{
	@include bg_check(30px,#303030,rgba(#fff,.1));
}

色やサイズは変わりましたか？
また線の幅にあたる1pxもあわせて引数にすることで、線幅を自由に変更できるチェックも作成することができます。
引数をさらに設定することで、縦横のラインで異なる色を設定することなども可能になります。

今回の記事を参考に、ぜひ試してみてください！

まとめ

今回は、@mixinを使用して、色やサイズを変更しつつ使いまわせるパターンをご紹介いたしました。
この設定を応用すると、他のパターンを作成するだけでなく、アニメーションのtransitionやテキストの設定なども共通化することができ、変更したい箇所だけを設定できるようになります。

便利な機能なので、それぞれのデザインや案件にあわせて使用してみてください。