s004：Sass（SCSS）でよく使う記述を部品化

公開日:2020年11月22日

HTML+CSS

Sass

よく使う記述を部品化：@mixin

CSS版関数定義のようなものです。何度も使うような記述を部品化（定義）しておき、使用する際に呼び出し（@include）ます。
※SCSSには計算処理をして値を返すことを主とした関数用の「@function」が別途用意されているため「@mixin」を部品化として区別しています

よく使うメディアクエリを「@mixin」を使って部品化します。

「@content」を使用すると呼び出し側CSSブロック内記述を反映させることができます。

mixin/_media.scss

@mixin pc {
  @media screen and (min-width: 480px) {
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: 479px) {
    @content;
  }
}

部品の呼び出し：@include

CSS版関数定義「@mixin」で部品化したものを呼び出して利用するには「@include」を使用します。

部品を利用するSCSSファイル.scss

body {
  @include pc {
    color: red;
  }
  @include sp {
    color: green;
  }
}

コンパイル後のCSSファイル.css

@media screen and (min-width: 480px) {
  body {
    color: red;
  }
}

@media screen and (max-width: 479px) {
  body {
    color: green;
  }
}

変数を使った「@mixin」定義

ブレイクポイントを変数定義しておくことで変更が楽になります。

「@include」で出力されるメディアクエリのブレイクポイントは変数の値が反映されます。

mixin/_config.scss

// ブレイクポイント
$breakPoint-pc: 480px;
$breakPoint-sp: 479px;

mixin/_media.scss

@mixin pc {
  @media screen and (min-width: $breakPoint-pc) {
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: $breakPoint-sp) {
    @content;
  }
}

部品の呼び出し：@include

部品を利用するSCSSファイル.scss

body {
  @include pc {
    color: red;
  }
  @include sp {
    color: green;
  }
}

コンパイル後のCSSファイル.css

@media screen and (min-width: 480px) {
  body {
    color: red;
  }
}

@media screen and (max-width: 479px) {
  body {
    color: green;
  }
}

引数を使った「@mixin」定義

引数を使用することでよく使う定義「@mixin」に値を渡すことができます。

例えばボタンデザインはよく使うので「@mixin」で部品化しておき、ボタンの色を引数で渡して利用することができます。

mixin/_media.scss

引数で受け取った値をデザイン定義に利用できます。

@mixin btn($backgroundColor) {
  background-color: $backgroundColor;
  border: 1px solid $backgroundColor;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

部品の呼び出し：@include

部品を利用するSCSSファイル.scss

呼び出し時に引数を使って「@mixin」の定義部分に値を渡すことができます。

必要であれば「@include」の後に追加でデザイン定義を記述できます。

.submit {
  @include btn(#f00);

  font-size: 16px;
}

コンパイル後のCSSファイル.css

.submit {
  background-color: #f00;
  border: 1px solid #f00;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}

複数の引数を使った「@mixin」定義

必要であれば「,（カンマ）」区切りで引数を複数指定できます。

mixin/_media.scss

引数で受け取った値をデザイン定義に利用できます。

@mixin btn($backgroundColor, $color) {
  background-color: $backgroundColor;
  border: 1px solid $backgroundColor;
  border-radius: 6px;
  color: $color;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

部品の呼び出し：@include

部品を利用するSCSSファイル.scss

呼び出し時に引数を使って「@mixin」の定義部分に値を渡すことができます。

必要であれば「@include」の後に追加でデザイン定義を記述できます。

.submit {
  @include btn(#fcc, #f00);

  font-size: 16px;
}

コンパイル後のCSSファイル.css

.submit {
  background-color: #fcc;
  border: 1px solid #fcc;
  border-radius: 6px;
  color: #f00;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}

引数に初期値を使った「@mixin」定義

呼び出し時に引数を渡さなかった場合の値、初期値を指定することができます。

mixin/_media.scss

@mixin btn($backgroundColor: #000, $color: #fff) {
  background-color: $backgroundColor;
  border: 1px solid $backgroundColor;
  border-radius: 6px;
  color: $color;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

部品の呼び出し：@include

部品を利用するSCSSファイル.scss

呼び出し時に引数を指定せずに「@mixin」を呼び出すと初期値を使用します。

.submit {
  @include btn;

  font-size: 16px;
}

コンパイル後のCSSファイル.css

.submit {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}

様々な引数指定方法：@include

部品を利用するSCSSファイル.scss

第1引数のみ指定。

.submit {
  @include btn(#f00);

  font-size: 16px;
}

コンパイル後のCSSファイル.css

第1引数は受け取った値を使用し、第2引数は初期値が使われます。

.submit {
  background-color: #f00;
  border: 1px solid #f00;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}

様々な引数指定方法：@include

部品を利用するSCSSファイル.scss

第2引数のみ指定する場合は定義部分の引数名を指定します。

.submit {
  @include btn($color: #f00);

  font-size: 16px;
}

コンパイル後のCSSファイル.css

第1引数は初期値を使用し、第2引数は受け取った値が使われます。

.submit {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 6px;
  color: #f00;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}