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

4396 ワード
scss scss テキストリンク

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);
}

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

Oracleアカウントの説明
Object Oriented Programming (3)