こんにちは。デザイナーの野尻です。
業務効率化のため、最近になってようやく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%;
}
この他にも「引数」を使った記述をからめることで、さらに便利に使い倒していくことができるようです！
半ばプログラミングの領域に片足を突っ込んでいる気持ちですが、理解して作業効率アップを目指して参ります
