【SCSS】@mixinと@extendで共有部分を使い回す

SCSSで@mixinと@extendで共有部分を使い回す方法を共有します。

SCSSの@mixinと@extendで共有部分を使い回す方法

そもそもSCSSのmixinとextendとは？

どちらも、scss内で共有するcssを書く際にとても便利な書き方です。

ものすごいざっくり説明すると、

mixin：事前にCSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回す機能（引数が使える）

extend: 定義しているスタイルを継承する機能

それでは詳しくみてみましょう。

 

mixin（ミクスイン）の基本的な使い方

CSSのスタイルを事前に定義しておいて、別の場所でそのスタイルを使い回す機能です。

SCSSでの指定方法

① 事前に共通化するCSSを設定します

@mixin border($color:#666) {
  border: 1px solid $color;
}

② スタイルを使いたい場合下記のように書きます。

#header {
  @include border;
}

これで #headerにborderを指定できます。

また、mixinは引数を指定できるのが特徴です。

上記の場合、もしborderの色を#999に変更したい場合、下記のように書いてください

#header {
  @include border(#999); 
}

 

最終的なCSS出力

#header {
  border: 1px solid #999;
}

 

 

extend（エクステンド）の基本的な使い方

定義しているスタイルを継承する機能です。

SCSSでの指定方法

.box {
  background-color: #CCC;
}

というクラスがあって、別の場所で同じスタイルを使いたい場合、下記のように記述します。

.contentsBox {
  // 読み込み
  @extend .box;
  
  color: red;
}

 

最終的なCSSの出力が下記になります。

.box {
  background-color: #CCC;
}

.contentsBox {
  background-color: #CCC;
  color: red;
}

 

以上です!