SCSSの記述をすっきりさせる方法 〜mixin(共通レイアウトをまとめる)〜

mixinで共通レイアウトをまとめる

styles.scss

.side-header{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-header{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

上記のように同じレイアウトのクラスがあった場合に@mixinでレイアウトをまとめるとscssの記述がすっきりします。

_mixin.scss

@mixin verticality_centering {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

styles.scss

@import "mixin.scss"

.side-header{
  @include verticality_centering;
}

.main-header{
  @include verticality_centering;
}

@mixin 変数名{レイアウト}で定義して、@include変数名で使用できます。

また引数を渡すこともでき、

mixin.scss

@mixin flex_style($value) {
    display: flex;
    justify-content: $value;
}

styles.scss

@import "mixin.scss"

.side-header{
  @include flex_style(space-between);
}

このような使い方もできます。