稀に発生する Sass / SCSS で web サイトを作る案件。 毎回メディアクエリを生成する mixin どう書いてたっけ？ってなるのでコピペできるメモ
Motivation
breakpoint を変数で持たせて mixin でそれぞれのメディクエリを生成できるようにする
media query を生成する mixin
$breakpoints: ( "sm": 430,"md": 768,"lg": 1024,"xl": 1280, ) !default; @mixin mediaUp($breakpoint) {@media screen and (min-width: #{map-get($breakpoints,$breakpoint)}px) { @content; }}@mixin mediaDown($breakpoint) {@media screen and (max-width: #{map-get($breakpoints,$breakpoint) - 1}px) { @content; }}// Retina display 用@mixin mediaRatio2() {@mediaonly screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { @content; }}
How to use
.container{max-width: 400px; @include mediaUp(sm) {max-width: 720px; }}// @2x な backgraound image.content{background-image: url("/path/to/background-image.webp"); @include mediaRatio2{ background-image: url("/path/to/background-image@2x.webp"); background-size: 300px320px; }}
毎回ググったり Bootstrap の実装見に行ってどうしてたっけ？ってなってたのでやっとメモできた。
最近はずっと React + vanilla-extract だったから稀な Wordpressみたいな案件で SCSS になると毎回全て忘れてるので困る。
技術も筋トレと一緒で使ってないと忘れる
おわり
[参考]
