(1)HOMEgulpでSASS/SCSSをコンパイルする時にメディアクエリをまとめる2019/03/04cssgulpSASS/SCSSSASS/SCSSで@mixinなんかを使ってるとどうしても冗長的になってしまうのがメディアクエリ、コンパイル後のCSSを見て「あーメディアクエリ長いなあ...」みたいなことになったことがあるのは私だけではないはず()普通にコンパイルをするとメディアクエリが無限に増える。いうのも、普通にCSSを記述する場合であれば同じメディアクエリはまとめて記述してしまう(もしくはファイルから変えてしまう)のがオーソドックスだと思いますが、SASS/SCSSを使う場合はメディアクエリをmixin化して利用する人が多いと思います。$width){@content;}}こんなやつですよね。none;とするCSSを考えます。none;}}こんな感じで書けますよね。これをそのまま普通の方法でコンパイルしてみます。}見てわかるように、@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をインストールします。css-mqpacker//iはinstall、-Dは--save-devでも可能あとはgulpfile.jsに下記を追加します。require('css-mqpacker');gulp.task('sass',function(){.pipe(postcss([mqpacker()]))});これでSASS/SCSSをコンパイルした後にメディアクエリがまとまるようになります。冒頭で紹介したファイルを再度コンパイルしてみましょう。}こんな感じになりますね。@mediaが一箇所にまとまっていますね。max-width、min-widthをそれぞれ大きさで並び替えて複数のメディアクエリが存在してもコンフリクトしないようにしてくれているようです。CSSのコンパイルがさらに楽になりました。