gulpでSASS/SCSSをコンパイルする時にメディアクエリをまとめる

SASS/SCSSで@mixinなんかを使ってるとどうしても冗長的になってしまうのがメディアクエリ、コンパイル後のCSSを見て「あーメディアクエリ長いなあ…」みたいなことになったことがあるのは私だけではないはず()

普通にコンパイルをするとメディアクエリが無限に増える。

というのも、普通にCSSを記述する場合であれば同じメディアクエリはまとめて記述してしまう(もしくはファイルから変えてしまう)のがオーソドックスだと思いますが、SASS/SCSSを使う場合はメディアクエリをmixin化して利用する人が多いと思います。

こんなやつですよね。

例えばある要素をPCサイズでfloat: left(right);、スマホサイズでfloat: none;とするCSSを考えます。

先ほどのmixinを利用すると

こんな感じで書けますよね。これをそのまま普通の方法でコンパイルしてみます。

見てわかるように、@mediaクエリが二箇所に記述されています。

単にこれだけの量なら気にならないかもしれませんが、1つのwebページにかかっているCSS全てでこれが発生するとなかなか冗長的なCSSが出来上がります。

かといって普通のCSSの記述に戻るか…?と言われればSASS/SCSSの記述のしやすさと速度を考えればSASS/SCSSをコンパイルするときにメディアクエリをまとめる方法を探すのが無難でしょう。

メディアクエリをまとめてくれるPostCSSプラグイン

実際、メディアクエリはmixinでまとめてしまう方が楽だし書きやすいです。とはいえ長いCSSを見るのも嫌、そんな時はPostCSSの

css-mqpacker

というプラグインが便利です。

※この記事は基本的にgulpを利用している前提で書いています。gulp導入の方法みたいな記事についてはまたどっかで書きます(多分)。

導入方法

※node.jsとnpmが既にインストールされている前提で書いています。

まずは、postCSSを入れていない人もいるかと思いますので、postCSSから導入します。これによって様々なpostCSSプラグインを利用できるようになります。

続いてautoprefixerをインストールします。

あとはgulpfile.jsに下記を追加します。

これでSASS/SCSSをコンパイルした後にメディアクエリがまとまるようになります。

早速、冒頭で紹介したファイルを再度コンパイルしてみましょう。

こんな感じになりますね。@mediaが一箇所にまとまっていますね。

どうやらmax-width、min-widthをそれぞれ大きさで並び替えて複数のメディアクエリが存在してもコンフリクトしないようにしてくれているようです。これでSASS/SCSS -> CSSのコンパイルがさらに楽になりました。

Social Share Button