
【.scssじゃない】SASS記法でメディアクエリ(mapとmixin&include)
一度知ってしまえばそれまでなのですが世の中ではまだまだ
SASS記法があまり浸透していないみたいで「sass メディアクエリ」と
調べてもSCSS記法のコードしか見つけられない人のために載せておきます
ソースコード
まずはパーシャルファイルとして_mediaquery.sassを作成します
_mediaquery.sass
$breakpoints: ("sm": "screen and (max-width: 768px)") $breakpoints: map-merge($breakpoints, ("md": "screen and (max-width: 1024px)")) $breakpoints: map-merge($breakpoints, ("lg": "screen and (max-width: 1280x)")) =mq($breakpoint: md) @media #{map-get($breakpoints, $breakpoint)} @content
SASS記法ではmap(連想配列)を作る際、1行に書かなければいけません。
そのため、可読性を重視するため複数行に書けるようにmap-mergeを使用して
key:valueを揃えました。
またSCSSでは「@mixin」と書いていたところはSASSだと「=」の一文字になります。
次にパーシャルファイルの読み込みと@includeの使い方を確認します。
style.sass
@import "mediaquery" html, body margin: 0 padding: 0 height: 100vh width: 100vw body background-color: #f00 +mq() background-color: #00f
パーシャルファイルの読み込みは「@import "ファイル名"」になります。
このとき、アンダーバーと拡張子は省略します。
SCSSで「@include」と書いていたところは「+」の一文字になります。