WPFormのカスタマイズで使用するメディアクエリ設定

2022年2月27日

このサイト内で

@include mq(sp) {

として呼び出している場合には必要です

参考としたサイト

https://www.nxworld.net/tips/sass-media-queries-mixin.html

$breakpoint: $breakpoint - 1;

久しぶりに見直すと、この部分がうまく動作していないようなので改変した
個人的にはmin-widthを使うことがほぼないので影響はなかった（と思いたい）

style.scss

// 変数設定
$mq-breakpoints: (
  "sp" : 600,
  "tab" : 960,
);

// MQ吐き出し
@mixin mq($breakpoint: sp, $rule: max) {
  $breakpoint: map_get($mq-breakpoints, $breakpoint);
  @if $rule == min {
    $breakpoint: $breakpoint + 1;
  }
  @media screen and (#{$rule}-width: #{$breakpoint}px) {
    @content;
  }
}

// コピペ用使い方
// @include mq { defaultはmobileでmax
// @include mq(sp) {}
// @include mq(tab) {}
// @include mq(sp, min) {}
// @include mq(tab, min) {}

よかったらシェアしてね！