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

###１．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以下表示

###３．該当のソースコード

SCSS
1$breakpoints: (
2"-sm": "screen and (width < 767.98px)",
3"-sm-": "screen and (576px <= width < 767.98px)",
4"sm-": "screen and (576px <= width)",
5"-md": "screen and (width < 991.98px)",
6"-md-": "screen and (768px <= width < 991.98px)",
7"md-": "screen and (768px <= width)",
8"-lg": "screen and (width < 1198.98px)",
9"-lg-": "screen and (992px <= width < 1198.98px)",
10"lg-": "screen and (992px <= width)",
11"-xl": "screen and (width < 1200px)",
12) !default;
13
14@mixin mq($breakpoint: md-) {
15  @media #{map-get($breakpoints, $breakpoint)} {
16    @content;
17  }
18}

エラーメッセージ

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 に対応していないことも考慮して

Lhankor_Mhy

2021/05/17 01:16

コンパイラはなんですか？

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示のコードをSassMeisterでコンパイルしてみたところ、Dart Sassでは成功しますが、LibSassでは失敗しました。

もし、LibSassをお使いでしたら、去年に非推奨となっていますので、コンパイラを変えてみてはいかがでしょうか。

参考：
Sass: LibSass is Deprecated

投稿2021/05/17 03:19

Lhankor_Mhy

総合スコア36074

createwebsite22

2021/05/17 11:56

アドバイスありがとうございます。私は、SCSSからCSS にコンパイルするコンパイラとして使っているのは「Easy Sass」です。これはそこそこ有名なプラグインだと思っているのですが、何か不具合なのでしょうか？今まで【SCSS】と【SASS】の違いは知っていました。しかし【Dart Sass】と【LibSass】の違いは初耳でした。使うコンパイラによってできることと、できないことに違いがあるのですね。かなり驚きでした。そのため、ネットなどで調べて「DartJS Sass Compiler and Sass Watcher」を使ったところ問題なくコンパイルさせることに成功しました。そして、問題なく WEB に反映させることができました。今まで、コンパイラによって違いはないと思っていたのですが、このようなことがあるのだと大変勉強になりました。