公開日：2019.10.28
更新日：2022.05.02
SASS（SCSS）のmixinとは？が図解で分かる
SASSの便利機能のひとつ、mixinについて基礎的な部分を図解してみました。
mixinとは、よく使うスタイル等をあらかじめ変数として定義しておいて、欲しいときに呼び出し使い回す機能です。
基礎の書きかた
記述としてはこうなるんですけど、
@mixin square {
width: 100px;
height: 100px;
}
.box {
@include square;
}
これ、どういう意味かと言いますと、下記の通りです。
”square”っていう変数を作るよー。と宣言、定義して、その中身はwidth:100px、height:100pxとする。
そして、boxというクラスに100pxの正方形というスタイルを当てたいなと思ったときに、変数squareを呼び出す。
こんなふうに人間語に直すと分かりやすいですね。
結果、出力先のCSSではこのようになります。
.box {
width: 100px;
height: 100px;
}
クラスに当てたスタイルと組み合わせる
クラスそのものに直に当てたスタイルと組み合わせることもできます。
@mixin square {
width: 100px;
height: 100px;
}
.box {
@include square;
background: red;
}
これで、100pxの赤い正方形.boxが出来上がりました。
引数を渡す
呼び出し側（include）で引数を渡して使うこともできます。
200pxの正方形が欲しいなら、@include square(200px)ですね。
引数に初期値を設定
初期値のまま使う
引数の受取り側（mixin）で初期値を設定しておくこともできます。引数名：値ですね。こちらでは呼び出し側で何も引数を渡してないので、初期値がそのまま使われます。
初期値を上書きする
もちろん初期値は上書きできます。
- 200pxを渡して初期値の100pxを上書き、
- それを当て込む形ですね。
複数の引数を渡す
カンマで区切って、複数の引数を渡すこともできます。
サイト保守契約の便利ツール
この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥
Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。
決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。
当事務所で導入しているのがSquare（スクエア）。
導入は無料で、コストはクレジット決済手数料（3%台）のみ。
毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。
制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。
非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。
