Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
62
Help us understand the problem. What is going on with this article?
@manabuyasuda

Sassでメディアクエリを効率的に管理するマップとmixin

More than 3 years have passed since last update.

使用するのはSass3.3から追加された新しいデータタイプのマップ。これはkeyとvalueのペアを定義できるものです。マップでvalueを取得するにはmap-get()関数を使用します。

map-get($map, $key)

詳しくはこちらの記事を参照してください。

Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説 | HTML5Experts.jp

マップはこのように定義しておきます。

$breakpoints: (
    'sm': 'screen and (min-width: 400px)',
    'md': 'screen and (min-width: 768px)',
    'lg': 'screen and (min-width: 1000px)',
    'xl': 'screen and (min-width: 1200px)',
) !default;

例えばsmがkeyでscreen and (min-width: 400px)がvalueになります。valueをクウォートで囲んで文字列として明示的に定義しておきます。

上述したmap-get()関数の$mapは定義したマップの$breakpointsにあたり、$keysmmdなどにあたります。mixinは以下のように定義します。引数にkeyを渡してvalueをブレイクポイントとして取得できるようにしています。

@mixin media-query($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media #{inspect(map-get($breakpoints, $breakpoint))} {
            @content;
        }
    } @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
    }
}

map-has-key()はマップが存在しているかを判定(これはなくてもOKです)、unquote()でvalueで囲んでいるクウォートを取り除きます。

実際にメディアクエリを呼び出す時にはこのようにします。

.foo {
  color: red;
  @include media-query(sm) {
    color: blue;
  }
}

コンパイル結果はこのようになります。

.foo {
  color: red;
}
@media screen and (min-width: 400px) {
  .foo {
    color: blue;
  }
}

この方法を使えば、1つのmixinとマップだけで様々な条件のブレイクポイントに対応ができ、それによってブレイクポイントの管理が分かりやすく変更しやすくなります。

以下の記事を参考にさせていただきました。

62
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
manabuyasuda
Frontend Engineer. Empathize ECSS.
tam-tam
TAM はパートナー型デジタルプロダクションです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
62
Help us understand the problem. What is going on with this article?