【SCSS】意味も分からず使っているメディアクエリ を整理してみる

CSSを生で書くことはなく、現在はSCSSを使用しております。
現在、私が使用している@mixinをつかったメディアクエリがこちらです。

// ブレイクポイント
$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);

// メディアクエリー
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

普通に使用する分にはこちらで全く問題ないのですが、正直何が書かれているのかイマイチわかっていなかったので一度整理したいと思い、記事を書いております。

この記事を読んでわかること

• SCSSを使用したメディアクエリの書き方
• メディアクエリに書かれている内部の情報について

$ とは

SCSSを書いていると$が頻繁に出てきます。
こちらは、変数を定義する際に使用します。

例えば文字の色や背景色を管理したいときにこのように指定することがあります。

$font-color : #333;
$bg-color : #fff; 

上記のように、設定をしておくことで、

h2{
color:$font-color;
}
.header{
background-color:$bg-color;
}

と書いていくことができるようになります。ここで抑えておきたいのが、
$font-color / $bg-color　の名前がキーとなって、#333や#fffの値を取得できるということです。

なので、今回は$breakpointsを変数名として、sp tab pcで定義した値("(max-width: 480px)"他を取得しています。
こちらは、変数のなかでもマップ型の変数と呼ばれております。特徴としては、変数の中に1つ以上のキーと値のペアを定義できます。今回はでいうと、3つ定義されています。
$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);

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

ブレイクポイントを定義した変数をmq()という変数で呼び出せるようにします。
@includeは定義されたスタイルを呼び出すためのものです。

なので、

@include mq("tab"){
font-size:12px
}

と呼び出してあげると、

@media (max-width: 768px) {
font-size:12px;
}

を呼び出すことができます。

はて、@contentってなんだとなりましたが、イマイチ納得できる記事がありませんでした。

まとめ

いまだ１００％の理解はできておりませんが、なんとなくわかってきました。
一つづつ分析することの大切さを学びました。

■参考記事
https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be