Sass / Scss Media Queries

レスポンシブデザインが当たり前のようになって来たこの時代はメディアクエリが重要だと思われます。メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。

だが、CSS でメディアクエリの書き方はまだ不便で、書くことも編集することも大変です。なのでCSSの拡張、SASS/SCSSでメディアクエリの書き方についてご紹介します。

例

.css

h3 { 
   color: red; 
   font-size: 1.4rem;
}

@media screen and (min-width: 768px) { 
   h3 { 
      color: blue; 
      font-size: 1.6rem;
   }
}

.scss

h3 {
    color: red;
    font-size: 1.4rem;
    
    @include media(md) {
	color: blue;
	font-size: 1.6rem;
    }
}

SASS／SCSSでメーディアクエリの書き方

1.メーディアクエリの書き方のその1

1.scss

$breakpoints: (
    'sm': 'screen and (min-width: 576px)',
    'md': 'screen and (min-width: 768px)',
    'lg': 'screen and (min-width: 992px)',
    'xl': 'screen and (min-width: 1200px)',
) !default;

@mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}
h3 {
     color: black;
	
     @include media(sm) {
	color: blue
     }
}

以上の書き方のコンパイルされたコード

compile1.css

h3 {
  color: black;
}
@media screen and (min-width: 576px) {
  h3 {
    color: blue;
  }
}

2.メーディアクエリの書き方のその2

2.scss

@mixin responsive($propertyName, $defaultValue, $mediaQueries: ()) {
  #{$propertyName}: #{$defaultValue};

  @each $breakpoint, $value in $mediaQueries {
    @media (min-width: #{$breakpoint}) {
      #{$propertyName}: #{$value};
    }
  }
}
  
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

h3 {
  @include responsive(color, red, ($sm: blue, $md: green, $lg: black));
  }

以上の書き方のコンパイルされたコード

compile2.css

h3 {
  color: red;
}
@media (min-width: 576px) {
  h3 {
    color: blue;
  }
}
@media (min-width: 768px) {
  h3 {
    color: green;
  }
}
@media (min-width: 992px) {
  h3 {
    color: black;
  }
}

以上のSASS/SCSSで2つメディアクエリの書き方です。１番名の方が使われているかもしれませんが、２番目の方はコード短く、便利です。ただ、パフォーマンスを気にする方は２番目使わない方がいいかもしれないですね。

参考記事：
1.https://zenn.dev/web_tips/articles/095d7419507ca9
2.https://levelup.gitconnected.com/the-easier-way-to-write-media-queries-with-scss-mixin-c7c956150551

エクステンション

1。min-width/max-width 使い分け
min-width：スマホファーストが優先される場合
max-width：PCが優先される場合

２。ファイルを分けた方がいい
例えば：

├── scss    
     ├── _variables.scss      ＃変数 ($)、プレースホルダー（%）を定義
     ├── _mixin.scss          ＃関数管理 ( @mixin($引数){} )
     └── style.scss