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

このサイト内で

@include mq(sp) {

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

参考としたサイト

NxWorld
Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット - NxWorld Media Queries(メディアクエリ)をSassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。
$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) {}
よかったらシェアしてね!

この記事を書いた人

作業ログです
WPFormsの紹介がひととおり終わったら、360度撮影やワードプレステーマ(Snow Monkey やSWELL)とかWoocommerceのことも残していく予定

目次
閉じる