Sassの変数と@mixinでレスポンシブデザインを作るときは@mixinの呼び出し順に注意

Sassの変数と@mixinで３パターンのレスポンシブデザインを作ろうとすると、CSSが適用されない

PC・タブレット・スマホの３パターンのレスポンシブデザインをSassの変数と@mixinで作ろうとして、CSSがうまく適用されませんでした。
結論としては、Sassの変数と@mixinでレスポンシブデザインを作るときは、ブレイクポイントの変数の用意の仕方で、@mixinの呼び出し順が異なります。
これによって一見CSSが適用されていないように見えてしまいます。

そもそも「Sassの変数と@mixinを使ってレスポンシブデザイン」を作る方法は？

こちらに素晴らしく分かりやすいサイトがございますので、こちらを御覧ください。
www.tam-tam.co.jp

本題：@mixinの呼び出し順について

用意したブレイクポイントの変数

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

用意したmixin

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

@mixinでメディアクエリを呼び出す

正しい呼び出し順

.container {
  width: $site-width;

  @include mq(md) {//画面サイズが768pxまでの場合、styleを適用
    width: 90%;
  }

  @include mq() {//画面サイズが414pxまでの場合、styleを適用
    width: 80%;
  }

誤った呼び出し順

.container {
  width: $site-width;

  @include mq() {//画面サイズが414pxまでの場合、styleを適用
    width: 80%;
  }

  //mq() で呼び出して適用したstyleが上書きされてしまう
  @include mq(md) {//画面サイズが768pxまでの場合、styleを適用
    width: 90%;
  }

まとめ

今回は用意したブレイクポイントの変数は「 'sm': 'screen and (max-width: 414px)',」のように「 max-width」で条件を定義しています。
この場合は、あとからstyleが上書きされないように、PC⇛タブレット⇛スマホの順に@mixinを呼び出します。
そのためブレイクポイントの変数を「min-width」で定義した場合は、@mixinの呼び出し順は今回と逆になります。