SCSSを勉強し始めるとmixinという単語を目にする機会が多いと思います！

よく使うCSS記述をテンプレート化しておき、includeという記述で呼び出すことが出来ます。

非常に便利です！

mixinとは？

mixinは、SCSS全体で再使用することができ、多様なスタイルを生成できる機能です。引数を使用して記述していく事も出来ます。

最初は「テンプレート化してSCSS内で再使用させることができるもの」と覚える程度で良いと思います。

mixinの使い方

例として下記CSSをmixinしてincludeで呼び出してみましょう。

.hoge {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

↓@mixin

@mixin flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

↓@include(呼び出し)

.hoge {
  @include flex;
}

基本的な使い方はこちらになります。
他にも引数というものを設定していく方法もあります。

引数を使用したmixin

@mixin color($rgb) {
  color:$rgb;
}

↓@include(呼び出し)

.hoge {
  @include color(red);
}

↓コンパイル結果

.text { 
color:red
}

こんな使い方もできます。

まとめ

今回は、SCSSのmixinについて軽く触れてみました！
普段から「よく使うな～」と思う記述はmixinしておき、includeで呼び出すだけにしておけば非常に楽です。
オリジナルmixinを作っていくのは案外面白いかもしれません！

最後まで読んでいただきありがとうございました！
是非シェアお願いいたします。