【mixin復習】SCSSでスタイルを定義することができるmixinの扱い方【SCSS初心者】

こんにちは。デザイナーの野尻です。
業務効率化のため、最近になってようやくSCSSに手を出し始めました。
慣れてくると、もう過去のCSSに戻れない便利さを体感しております。。
今回はSCSSを使い倒すためにマスターしたい「mixin」という記述の仕方について、備忘録を兼ねて記事にしたいと思います。

mixinでできること

mixin（ミックスイン）とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能です。
値を定義する変数と違い、スタイル自体を定義することができるので、ブレイクポイントの記述などにも多く使われているようです。

mixinの書き方

再利用したいスタイルを@mixin 名称{}の形式で定義

具体的にはこんな感じになります

【定義】

@mixin before_box{
content:" ";
display:block;
width:100%;
height:100%;
}

「before_box」が名称になります

これをSCSSに使用するときには

@include 名称（↑の例だとbefore_box）;

で呼び出すことができます。
最近のお仕事で、before要素に特定のスタイルを適用することが多かったので、こんな例を作成してみました

【呼び出し例】

.box{
&:before{
@include before_box;
}
}

【コンパイルされたCSS】

.box:before{
content:" ";
display:block;
width:100%;
height:100%;
}

この他にも「引数」を使った記述をからめることで、さらに便利に使い倒していくことができるようです！
半ばプログラミングの領域に片足を突っ込んでいる気持ちですが、理解して作業効率アップを目指して参ります