Sassのmixinの使い方について

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassのmixinについて定義方法、ネスト、引数、引数の初期値、引数を複数指定する場合、任意の引数のみに指定する方法

以前私が投稿した記事の後に実際mixinを使ってみたところ、もっと自在に使いこなせるようになりたい！という気持ちが強くなったので、今回は更にmixinを深堀りをした記事を書きたいと思います。

概要

mixinがどのようなものなのか、基本的な紹介は以前の記事で載せましたが、改めて紹介します。

mixin

まとまったCSSのスタイルを定義する機能です。mixinを使うことで、何度も同じ指定をすることなく使い回すことができます。Sass記法かScss記法で記述方法に違いがありますが、今回はScss記法で書いてみます。

例

前提として、mixinはファイルの読み込みが先に行われないとエラーになってしまいますので、1番最初に記述します。Railsで@importを使ってファイルを読み込んでいる場合は、mixinを記述するファイルの読み込み順が上位に来るように編集をして下さい。

定義方法

次のように記述します。引数がない場合は()は不要です。

@mixin 任意のmixin名(引数名) {}

例として、ボタンを作りたいので次のようなmixin名で定義してみます。

@mixin buttonStyle {
}

お問い合わせフォームを作る過程で同じような所が3箇所程あります。

.contact {
  a {
    background-color: blue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 50px;
    width: 200px;
  }
}

.buttons {
  .modalopen {
  }
}

.share {
  a {
  }
}

.contact aに適用されているスタイルをそのままmixin内にコピペします。

@mixin buttonStyle {
  background-color: blue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  height: 50px;
  width: 200px;
}

定義したmixinは@include mixin名;で呼び出すことができます。
それぞれのセレクタにmixinで定義したスタイルを同じく適用することができます。

@mixin buttonStyle {
  background-color: blue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  height: 50px;
  width: 200px;
}

.contact {
  a {
    @include buttonStyle;
  }
}

.buttons {
  a {
    @include buttonStyle;
  }
}

.share {
  a {
    @include buttonStyle;
  }
}

ネスト

今回の例では、全てaタグに適用しましたが、aタグを含めて定義することもできます。
その場合、mixinを呼び出す所にaタグを書かなくて良いのでコードがスッキリします。

@mixin buttonStyle {
  a {
    background-color: blue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 50px;
    width: 200px;
  }
}

引数

引数はmixin名の右に($引数名)のように記述します。特定のプロパティ値だけ変更したい時に使います。

@mixin buttonStyle($引数名) {}

引数とスタイルのプロパティ値に同じ引数を記述することで、引数の所にカラーコードを指定すると、その色が適用されます。

@mixin buttonStyle($color) {
  background-color: $color;
  // 中略
}

.contact {
  a {
    @include buttonStyle(blue);  // 背景色が青になります
  }
}

.buttons {
  a {
    @include buttonStyle(red); // 背景色が赤になります
  }
}

.share {
  a {
    @include buttonStyle(green); // 背景色が緑になります
  }
}

引数の初期値

引数にプロパティの初期値を指定することも可能で、引数の右に:プロパティ値を記述します。
よく使う値を引数にしておくと便利かもしれません。

@mixin buttonStyle($color: blue) {
  background-color: $color;
  // 中略
}

.contact {
  a {
    @include buttonStyle; // 初期値が青色で、引数に何も指定していないので背景色が青色になります
  }
}

引数を複数指定する場合

引数を複数指定する場合は、,カンマで区切ります。

@mixin buttonStyle($color: blue, $height: 30px) {
  a {
    background-color: $color;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: $height;
    width: 200px;
  }
}

任意の引数のみ指定する

複数の引数を指定していて、とある1つの引数だけ値を変更したい場合は@includeに変更したいプロパティ名と値を記述します。

@mixin buttonStyle($color: blue, $height: 30px, $width: 200px) {
  a {
    background-color: $color;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: $height;
    width: $width;
  }
}

.share {
  a {
  @include buttonStyle($width: 100px);
  }
}