@mixinを使ってメディアクエリを書く方法がわかりません。

Question

とあるこの↓サイトを見て　scss　の　@mixin　を使ってメディアクエリを書く方法を学んでいたのですが、分からない部分があります。https://haniwaman.com/sass/#mixin

$layout-width-inner: 1024px;
$breakpoints: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
  "pc": "screen and (min-width: #{$layout-width-inner})"
);

↑のコードについてです。
この$:{
};

というのは、$をまとめて書く際の記述方法と考えてよろしいですか？
また、"#"の記号は何を表しているのでしょうか？

@mixin mq($breakpoint: sp) {

  @media #{map-get($breakpoints, $breakpoint)} {

    @content;
  }
}

↑このコードのなかの、"#"も何を意味しているのかがいまいちわからないです。また、「map-get」というのは何を表しているのでしょうか？
ネットで検索してもあまり詳しい解説が出てこないので困っています。どなたかわかりやすく教えて頂けたら大変助かります。よろしくお願いいたします。

Answer 1

CSSはともかく、SCSSは詳しくないので調べ方だけ。
#とか$とか記号　　そのままカタカナにして検索ワードで入れてみてください。

今回だと
[SCSS シャープ]
[SCSS ドルマーク]

私が読んだ限り、結構始めの方に納得いく解説をしてくれてる記事はありました。

ただ、やはり確実に仕様をおさえるのでしたらドキュメントでしょうね。
SASS @mixin and @include

Google翻訳にかけながらでも読み進めていくと、理解は深まると思います。

Comments

[chifflot]

https://tenderfeel.github.io/SassReference/sass-script/interpolation.html

「SCSS シャープ」と検索したら回答に合うページがすぐ出てきました。ありがとうございます！

[m.ts10806]

解決されたようで何よりです。
質問するときのヒントにもあるのですけど、
https://teratail.com/help/question-tips#questionTips1-2
「調べ方のコツを知っていることも今後プログラミングをしていくうえで重用な能力の1つ」ということですね。
今後質問するときで結構ですので、「検索に使用したキーワードの例」や「確認した記事URL」をセットで質問すると良いです。
すると「こういうキーワードはどうか」というアドバイスがつくので、直接の答えをもらうより自身の成長に繋がりやすくなります。

[chifflot]

はい、ありがとうございます。大変参考になりました。