SCSSの基本構文4 - mixinやextend(継承)

Webサイト制作

SCSS

基礎

投稿日時 : 2024/11/26 更新日時 : -

定義されたCSSのプロパティを読み込むにはmixinを使う。

SCSSのmixinの使い方

まず@mixinでプロパティを定義し、それを@includeで読み込む。


@mixin base-box {
  width: 100px;
  height: 100px;
}

.red-box {
  @include base-box();
  background: red;
}

.blue-box {
  @include base-box();
  background: blue;
}

出力されるのは下記。


.red-box {
  width: 100px;
  height: 100px;
  background: red;
}

.blue-box {
  width: 100px;
  height: 100px;
  background: blue;
}

mixinの応用で引数を使う方法

変数や引数を使うと利便性が増すぞ。ここでは$sizeを仮引数にして使用し、呼び出し側がボックスのサイズを決めて生成するようにした。


@mixin base-box($size) {
  width: $size;
  height: $size;
}

.red-box {
  @include base-box(50px);
  background: red;
}

.blue-box {
  @include base-box(120px);
  background: blue;
}

出力されるのは下記。


.red-box {
  width: 50px;
  height: 50px;
  background: red;
}

.blue-box {
  width: 120px;
  height: 120px;
  background: blue;
}

SCSSの継承 - extendについて

SCSSにはmixinにも似たextend(継承)の機能もある。mixinは引数のパラメータを渡せたが、extend(継承)は引数を渡せない。


.oya_box {
 width: 100px;
 height: 100px;
 border: 1px solid silver;
}

.ko_green {
 @extend .oya_box;
 background: green;
}

.ko_pink {
  @extend .oya_box;
  background: pink;
}

出力結果は下記。


.oya_box, .ko_pink, .ko_green {
  width: 100px;
  height: 100px;
  border: 1px solid silver;
}

.ko_green {
  background: green;
}

.ko_pink {
  background: pink;
}

.oya_boxも出力されている事が分かるな。

SCSSのmixinとextendの使い分け

mixinはプロパティの情報をそのまま出力するので使い過ぎるとCSSのファイルサイズが大きくなる。例えばmixinを10回使えば、10個分mixinで記したプロパティが各セレクタに出力される。引数が渡せるので完全に別のクラスなどのセレクタを定義する場合に有効だ。

extendは上のコードのように重複されるコードは1つのコードにまとめられるのでCSSのファイルサイズの縮小や最適化に繋がる。mixinもextendも仕様を理解して使うとよいかもしれない。