icon-attention デザイン新しくしました。

icon-calendar 2019年5月18日

【.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」と書いていたところは「+」の一文字になります。