@createwebsite22 (Taka 西川)posted at 2021-05-16

SCSS を使ってブレイクポイントを指定し、メディアクエリを反映させたい

Q&A

１．SCSS から CSS がうまくコンパイルされない

以下の条件でSCSS を使ってブレイクポイントを指定し、CSSのメディアクエリを実現したいのですが、
うまくコンパイルできません。

各ブレイクポイントは下記参照

"sm": "screen and (min-width: 576px)",
"md": "screen and (min-width: 768px)",
"lg": "screen and (min-width: 992px)",
"xl": "screen and (min-width: 1200px)",

その上で、以下の条件のメディアクエリを指定したのですが、上手くコンパイルされません。

２．以下の条件のメディアクエリを指定したのですが、上手くコンパイルされない

【01】sm以下表示
【02】smのみ表示
【03】sm以上表示
【04】md以下表示
【05】mdのみ表示
【06】md以上表示
【07】lg以下表示
【08】lgのみ表示
【09】lg以上表示
【10】xl以下表示

３．該当のソースコード


$breakpoints: (
"-sm": "screen and (width < 767.98px)",
"-sm-": "screen and (576px <= width < 767.98px)",
"sm-": "screen and (576px <= width)",
"-md": "screen and (width < 991.98px)",
"-md-": "screen and (768px <= width < 991.98px)",
"md-": "screen and (768px <= width)",
"-lg": "screen and (width < 1198.98px)",
"-lg-": "screen and (992px <= width < 1198.98px)",
"lg-": "screen and (992px <= width)",
"-xl": "screen and (width < 1200px)",
) !default;

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

エラーメッセージ

Error: unclosed parenthesis in media query expression

４．試してみたこと

まず、間違っていると感じた記述があります。
それは、ハイフン【-】で始めることです。

そもそも、"sm" などの変数の部分はどのような記述がOKでどのような記述がNGなのでしょうか？

５．補足情報

【01】～【10】のメディアクエリを実現させるためには、どのような記述をすればいいでしょうか？
可能であれば次の２種類の記述でアドバイスいただければありがいです。

① 論理演算子
例）768px px <= width <= 991.98px

① [min-/max-]width
例） (min-width: 768px) and (max-width: 991.98px)

※Media Queries Level 4 に対応していないことも考慮して

Are you sure you want to delete the question?