0%

Programmingプログラミングナレッジ

Posted:2020.01.16

Sassのmixinで引数と@ifを使った条件分岐のテクニック

Sassではいろんな便利機能が用意されています。そのうちの1つである「mixin」機能ですが、これを使いこなすことで、スタイルとして記述するコード量を大幅に減らしたり、共通化されることで改修コストを圧縮できたりします。今回はそのmixinに引数を使うことで、条件別にmixinで出力する内容を切り分けるテクニックをまとめていきたいと思います。

 

具体的なケースとしては、メディアクエリと特定のスタイルをmixinで定義しており、スクリーンサイズによって、スタイルも切り分けたいという場面になります。例えば、PCとスマホでフォントサイズを切り替えたいという感じですね。その場合は下記のようなコードになるかと思います。

【Sass(SCSS)】

// mixin定義
@mixin text-style-pc {
 font-size: 28px;
}
@mixin text-style-sp {
 font-size: 16px;
}
@mixin media-query-pc {
 @media screen and (max-width: 992px) {
  @content;
 }
}
@mixin media-query-sp {
 @media screen and (max-width: 480px) {
  @content;
 }
}

// mixin呼び出し(include)
@include media-query-pc {
 div {
  @include text-style-pc;
 }
}
@include media-query-sp {
 div {
  @include text-style-sp;
 }
}

 

まずはスタイルとメディアクエリを「@mixin」として定義します。ちなみにですが、mixinを使った複雑なメディアクエリの管理方法については過去記事「Sassのマップ変数を活用して複雑なメディアクエリを一括で管理する」にて詳しくまとめていますので是非こちらもご参考ください。上記はサンプルなのでシンプルなメディアクエリにしています。

 

定義したmixinは「@include」で呼び出して使うのですが、スタイルの数が増えてきた場合にmixinが大量に作成されてしまうことになります。複雑になると管理するのも大変なので、1つにまとめておきたいところですね。そんな時にはmixinに引数をつけて、mixin内で引数をとった条件分岐を設定するようにして、そこに条件別のスタイルを記述していくと1つのmixinにまとめることができます。

 

下記は具体的なサンプルになりますが、引数にメディアクエリを判別するフラグを変数として格納しておきます。そのmixin内で、引数を取って「@if・@else」で条件分岐させて、メディアクエリごとのスタイルを記述していきます。

【Sass(SCSS)】

@mixin text-style($isMobile) {
 @if ($isMobile) {
  font-size: 28px;
 }
 @else {
  font-size: 16px;
 }
}

 

こうすることでmixinが1つにまとめられ、見た目もスッキリしたのとコードの見通しもかなり良くなりましたね!もちろん「@else if」の形で2通り以上の条件分岐に対応させることも可能です。そしてこのmixinをincludeで呼び出す際に引数に対応する値を入れることで、条件分岐として切り分けたスタイルを適用させることができるようになります。

【Sass(SCSS)】

@include media-query-pc {
 div {
  @include text-style($isMobile: false);
 }
}
@include media-query-pc {
 div {
  @include text-style($isMobile: true);
 }
}

 

実際にコンパイルすると、下記のように出力され、本来のメディアクエリ別に切り分けられたスタイルが適用できているのが確認できますね。

【CSS(コンパイル後)】

@media screen and (max-width: 992px) {
 div {
  font-size: 28px;
 }
}
@media screen and (max-width: 480px) {
 div {
  font-size: 16px;
 }
}

 

今回あげている、mixinの引数を使った条件分岐のサンプルは下記に用意していますので、一度確認してみてください。

 

See the Pen
conditional_using_arguments_mixin
by designsupply (@designsupply)
on CodePen.

 

Sassではmixinの中にmixinを入れるという入れ子の構造はできないので、mixin内で内容を切り分けたい場合には引数を使った条件分岐をすることで実現することができます。複雑なスタイルになってくるとメリットは大きくなるので、使える場面では是非試してみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】