カノトのアトリエ

カノトのアトリエ > ウェブ開発 > HTML/CSS > 使って覚えるSASS入門 > SASSで使えるmixinの解説と爆速コーディングのためのテクニックを紹介！

SASSで使えるmixinの解説と爆速コーディングのためのテクニックを紹介！

今回はSASSで用意されている【mixin】について紹介していきます！

mixinとは、複数の記述（プロパティ）をひとつにまとめることができる優れものです！
mixinが使えるとコードがスッキリするのと爆速でコーディング出来るようになるので確実に覚えておきたいですね！！

前半は、mixinの使い方を解説しています。
後半は、mixinの使いどころも紹介しているので、ぜひ読んでいってくださいね♪

とりあえず記述方法（SCSS記法）

// mixinの定義
@mixin hoge($foo) {
// ここに記述する
}

// mixinの呼び出し
@include hoge($foo);

mixinを実際に使ってみる

それでは、実際にmixinを使ってみます！
まずは、mixinを使うための宣言をする必要があります。

// mixinの宣言
@mixin text() {
  font-size: 12rem;
  color: #333;
}

今回は、font-size: 12rem;とcolor: #333;をまとめてみます。
また、mixinの名前は「text」にしています。

あとは、font-size: 12rem;とcolor: #333;を反映させたいところで「text」をインクルードしてあげればOKです！

インクルードするには次のように記述します。

// mixinの定義
@mixin text() {
  font-size: 12rem;
  color: #333;
}

.text {
  // mixinの呼び出し
  @include text();
}
// 出力結果
.text {
  font-size: 12rem;
  color: #333;
}

mixinで定義した内容を反映させるには、反映させたいところに@include text();を記述してあげればOKです！

引数も使える

mixinは引数を使うことも出来ます！
引数を使うことで反映する箇所によって値を変えることが出来ます。

実際にやってみましょう！
今回の例ではフォントサイズを変えてみます。

// mixinの定義
@mixin text($size) {
  font-size: $size;
  color: #333;
}

.text_12 {
  // font-sizeを12remにする
  @include text(12rem);
}
.text_14 {
  // font-sizeを14remにする
  @include text(14rem);
}
// 出力
.text_12 {
  font-size: 12rem;
  color: #333;
}
.text_14 {
  font-size: 14rem;
  color: #333;
}

こんな感じで複数個所に流用することが出来ます。

これでmixinの基礎は完了です！
前半戦、お疲れ様でございますです！！

mixinはどんなときに使えばいいの？

ここまで来ると、
「結局、mixinってどんなときに使うねん！」
と思う方も多いと思います。

後半では、mixinの使いどころを紹介していきたいと思います！

よく使う記述はまとめて爆速コーディング

CSSを使っていると、
「全く同じ記述を別のところでも使いたい！！」
なんてことが、多々あると思います。

カラーコードやピクセル数のような値であれば、変数を使うことができますが、複数行になるとお手上げです(´；ω；｀)
そんなときにmixinがあれば万事解決！！

例えば、フレックスボックスで上下左右を中央に寄せたいときは多々あると思います。

display: flex;
justify-content: center;
align-items: center;

これをmixinで記述すると、

@mixin flex_center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

こんな感じになると思います。
使用するときは、@include flex_center();を書いてあげるだけでフレックスボックスで上下左右中央にすることが出来ます。

記述量がだいぶ減りましたね！！

さらに、よく使うmixinを１つのファイルにまとめることで複数サイトで流用することが出来ます。

例えば、

  1. サイトAで作ったmixinをmixin.scssにまとめる
  2. このmixin.scssをサイトBにコピーして使う
  3. サイトBを作る際に新しく生み出したmixinをmixin.scssに追加

これをエンドレスで続けていけば、世界にひとつだけのオリジナルmixinファイルが出来上がります！
このファイルを使えば、includeを呼び出すだけで必要な要素を爆速で作ることが出来ます！！

scssファイルは本番環境に上がることはないので、不要な記述がたくさんあっても気にする心配はありません♪

mixinで複雑怪奇なプロパティをスッキリに！

mixinを使うと【text-shadowを使ってCSSでテキストを縁取りする方法】で紹介しているような複雑怪奇なコードもまとめることが出来ます！

ちなみにこんなコード・・・。

text-shadow: #000 2px 0px,  #000 -2px 0px,
#000 0px -2px, #000 0px 2px,
#000 2px 2px , #000 -2px 2px,
#000 2px -2px, #000 -2px -2px,
#000 1px 2px,  #000 -1px 2px,
#000 1px -2px, #000 -1px -2px,
#000 2px 1px,  #000 -2px 1px,
#000 2px -1px, #000 -2px -1px;

こんなに極端じゃなくても、なかなか覚えられないCSSのテクニックでもいいかもしれないですね！

例えば3点リーダーの実装。
個人的によく使うけどすぐに忘れるCSSの記述・・・。

@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

まとめ

  • @mixin hogehoge() {} で定義する
  • @include hogehoge() 呼び出す
  • よく使う記述をmixinにまとめておけば記述量削減
  • mixinをファイルにまとめておけば別プロジェクトでの流用が簡単
  • 複雑なプロパティをまとめるのに便利