Sassをプロジェクトで使うときに役に立つメディアクエリmixinとカラーパターン

2021.06.28

こんにちはjunです。最近のプロジェクトではsassばかり使っていてもうcssを書くことがなくなっているせいか、sassの記法でcssを書いてしまいエラーを起こすことも何回かありました笑。sassはフロントエンドで開発するならば絶対に使えておきたいツールです。その中でプロジェクトに関係なく、同じユーティリティーなライブラリ的なmixinを使うことがあります。

例えば引数を指定するだけでプロジェクトで定義したメディアクエリを出すmixin、bootstrapのようにcomponent-primaryとすればprimary色にしてくれるクラスを出力するmixinなどです。mixin意外にもmargin,paddingのユーティリティなどもよく使います。

いつも忘れてサイトを探して時間を潰しているのでここにメモしたいと思います。

※sassの解説ですがscssの記述をします！sass=scssと思ってみてください。

引数を使用して特定のメディアクエリを利かすmixin

sassを使用する場合、あるクラスに対するメディアクエリは以下のように付与できます。

.p-project{
    font-size:20px;

    @media screen and (max-width: 399px){
        font-size:10px;
    } 
}

cssの場合はメディアクエリでクラスを囲む必要ありますが、sassは対象のクラスでラップするだけで有効なのでかなり便利です。ただしメディアクエリの記述が長いこと、ブレークポイントの数値・変数を入れるのが面倒なので以下のようなmixinを作成します。

$sm-point:400;
$md-point:600;
$lg-point:1000;
$xl-point:1300;

$breakpoint-up: (
  'sm': 'screen and (min-width: #{$sm-point}px)',
  'md': 'screen and (min-width: #{$md-point}px)',
  'lg': 'screen and (min-width: #{$lg-point}px)',
  'xl': 'screen and (min-width: #{$xl-point}px)',
) !default;

$breakpoint-down: (
  'sm': 'screen and (max-width: #{$sm-point - 1}px)',
  'md': 'screen and (max-width: #{$md-point - 1}px)',
  'lg': 'screen and (max-width: #{$lg-point - 1}px)',
  'xl': 'screen and (max-width: #{$xl-point - 1}px)',
) !default;

$breakpoint-only: (
  'sm': 'screen and (max-width: #{$sm-point - 1}px)',
  'md-sm': 'screen and (max-width: #{$md-point - 1}px) and (min-width: #{$sm-point}px)',
  'lg-md': 'screen and (max-width: #{$lg-point - 1}px) and (min-width: #{$md-point}px)',
  'xl-lg': 'screen and (max-width: #{$xl-point - 1}px) and (min-width: #{$lg-point}px)',
  'xl': 'screen and (min-width: #{$xl-point}px)',
) !default;

/*
sm  =>  スマホ
md  =>  タブレット
lg  =>  PC
xl  =>  でかいPC
*/

@mixin mq-up($breakpoint: md) {
  @media #{map-get($breakpoint-up, $breakpoint)} {
    @content;
  }
}

@mixin mq-down($breakpoint: md) {
  @media #{map-get($breakpoint-down, $breakpoint)} {
    @content;
  }
}

@mixin mq-only($breakpoint: md-sm) {
  @media #{map-get($breakpoint-only, $breakpoint)} {
    @content;
  }
}

実際に使用する際は以下のようにします。

.test{
    @include mq-up(xl){
        // 1300px以上で有効
        background-color:blue;
    }

    @include mq-only(md-sm){
        // 599px〜400pxで有効
        background-color:yellow;
    }

    // 1299px ~ 600px, 399px~ で有効
    background-color:red;
}

このようにメディアクエリをかなり短く記述できます。引数を指定するだけなので直感的ですし、変数でサイズを定義しているので変更もしやすいです。mq-up、mq-downはあるブレークポイント以上・以下で働くメディアクエリですが、mq-onlyは指定したメディアクエリ間のみ作用します。このメディアクエリmixinはかなり役に立ち、プロジェクトセットアップ時に毎回やっています。

カラーパターンクラス

Bootstrapのボタンクラスでbtn btn-dangerとすると赤い色のボタンになります。warningなら黄色、dangerなら赤色といった具合に色の設定をして、その色のクラスがあればその色にするクラスを作成するmixinです。まずは色をmapで定義します。

$colors:(
    "red"   :#E60012,
    "orange":#F39800,
    "yellow":#FFF100,
    "green" :#009944,
    "blue"  :#0068B7,
    "purple":#920783,
);
$default-color:map-get($colors,"red");

そしてボタンのクラスがあるとします。

.btn{
    background-color:$default-color;
    border:1px solid;
    border-color:darken($default-color,15%);
    border-radius:5px;
    padding:10px;
    text-align:center;

    @each $key, $color in $colors {
        &-#{$key}{
            background-color:$color;
            border-color:darken($color,15%);
        }
    }
}

こうすると

.btn {
  background-color: #E60012;
  border: 1px solid;
  border-color: #9a000c;
  border-radius: 5px;
  padding: 10px;
  text-align: center; }
  .btn-red {
    background-color: #E60012;
    border-color: #9a000c; }
  .btn-orange {
    background-color: #F39800;
    border-color: #a76800; }
  .btn-yellow {
    background-color: #FFF100;
    border-color: #b3a900; }
  .btn-green {
    background-color: #009944;
    border-color: #004d22; }
  .btn-blue {
    background-color: #0068B7;
    border-color: #003d6b; }
  .btn-purple {
    background-color: #920783;
    border-color: #490442; }

それぞれの色パターンのボタンクラスができました。実際に適用してみると以下の通りです。

mapとeachを使うとカラーパターンのクラスを簡単に実装できます。