ネスト、パーシャル、ミックスイン【SCSS】

2021年12月14日 16:07

※自分用の備忘録です。

ネスト

ネストとはCSSのセレクタを入れ子で記述する方法です。

SCSSで書いた場合

header {
  background-color: #333;
  h1 {
    color: #fff;
  }
}

コンパイル結果

header {
  background-color: #333;
}
header h1 {
  color: #fff;
}

ファイルを分割する方法です。

分割したSCSSファイルを作成後、下記のコードをまとめたいSCSSファイルに記述します。

@use 'ファイルパス';

変数を別ファイルに定義している場合は、変数を使いたいところで拡張子を省いたファイル名を書く必要があります。

@use 'variables.scss';

//variables.scssに$bg-colorを宣言している場合
background: variables.$bg-color

省略系の書き方

@use 'variables.scss' as v;

//variables.scssに$bg-colorを宣言している場合
background: v.$bg-color

ミックスインは、同じようなスタイルをあらかじめ定義しておき、使い回しを行う方法です。

ミックスインを定義する方法

@mixin ミックスインの名前 {
  スタイル
}

定義をしただけでは何も変化はありません。
使用したい場所で使用するためのコードを記述する必要があります。

ミックスインを使用する方法

div {
  @include ミックスインの名前;
}

例、幅200px、高さ200px、色#333の四角形を表示させたい場合

@mixin square {
  width: 200px;
  height: 200px;
  background-color: #333;
}

上記のように定義をし、下記のようにセレクタの中に記述をします。

.box {
  @include square;
}

引数を使う方法

@mixin square($size) {
  width: $size;
  height: $size;
  background-color: #333;
}

ミックスインの名前の後ろに()をつけ、$マークに続けて引数名をつけます。

.box {
  @include square(200px);
}

ミックスインを使用したいところで@include ミックスイン名の後に()をつけ、指定したい数値を記述すると引数に反映されます。

引数には初期値を設定することができます

@mixin square($size:200px) {
  width: $size;
  height: $size;
  background-color: #333;
}

$引き数名の後ろに「:」と初期値を記述すると初期値を設定できます。

初期値を反映させたい場合は

.box {
  @include square;
}

初期値以外の数値を入れたい場合

.box {
  @include square(300px);
}

複数の引数を定義する

@mixin square($size:200px, $bg:#333) {
  width: $size;
  height: $size;
  background-color: $bg;
}

「,」で区切ることで複数の引数を定義することができます。

.box {
  @include square(300px, #ccc);
}

使用する際に、初期値以外を指定したい場合は「,」で区切り使用したい値を記述します。

グラデーションカラーをミックスイン

@mixin gradient-color($color1:#333, $color2:#ccc) {
  background: linear-gradient($color1, $color2);
}

複数の色を指定するlinear-gradientはミックスインで定義しておくと使い勝手が良くなります。

.box {
  width: 200px;
  height: 200px;
  @include gradient-color;
}

メディアクエリーをミックスイン

ミックスインはプロパティも含めたブロックごと引き渡すこともできます。

メディアクエリーをミックスインにしておくと、異なる幅のスタイルを記述するのがとても楽になります。

@mixin desktop {
  @media(min-width: 600px) {
    @content;
  }
}

h1 {
  font-size: 2rem;
  @include desktop {
    font-size: 5rem;
    }
}

コンパイル結果

h1 {
  font-size: 2rem;
}
@media (min-width: 600px) {
  h1 {
    font-size: 5rem;
  }
}