今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。
目次
今回の完成形
今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。
.test-1 {
margin-top: 16px;
font-size: 16px;
}
@media screen and (min-width: 600px) {
.test-1 {
margin-top: 24px;
font-size: 18px;
}
}
@media screen and (min-width: 960px) {
.test-1 {
margin-top: 32px;
font-size: 20px;
}
}
.test-2 {
margin-top: 10px;
}
@media screen and (min-width: 600px) {
.test-2 {
margin-top: 20px;
}
}
@media screen and (min-width: 960px) {
.test-2 {
margin-top: 30px;
}
}
Sass/Scssを使っていると、上のソースコードのようにメディアクエリがひとつひとつについてしまい、容量が増えてしまうことや、可読性が低くなりますよね。
GulpとPostCSSの「mqpacker」というプラグインを使えば、下記のようにメディアクエリを綺麗に1つにまとめることができます。
.test-1 {
margin-top: 16px;
font-size: 16px;
}
.test-2 {
margin-top: 10px;
}
@media screen and (min-width: 600px) {
.test-1 {
margin-top: 24px;
font-size: 18px;
}
.test-2 {
margin-top: 20px;
}
}
@media screen and (min-width: 960px) {
.test-1 {
margin-top: 32px;
font-size: 20px;
}
.test-2 {
margin-top: 30px;
}
}
まずはNode.jsをインストール
「mqpacker」を使うには、GulpとPostCSSが必要になります。 ややこしそうに見えますが、導入やインストールはすぐに終わるので、説明に従って進めていきましょう。
まずは、Gulpを使うためにNode.jsを公式サイトからダウンロードします。
画像 ダウンロードページに、「推奨版」と「最新版」の2つがありますが、個人的には、推奨版で十分かと思います。
ダウンロードしたら手順に従ってインストールして下さい。
基本、「次へ」を押して進んでいくだけで大丈夫です。
これで、Node.jsのインストールが完了しました!
コマンドラインを起動する
コマンドラインとは、パソコンについている黒い背景のアレです(笑)。
Windowsは、コマンドプロンプト(左下の検索からコマンドプロンプトと検索して起動)で、Macは、ターミナル(フォルダのアプリケーション→ユーティリティ→ターミナル)です。
コマンドラインを起動して、黒い背景が出たら、下記のコマンドを入力し、Enterキーを押し、バージョンの情報(例:v12.16.1)が表示されたら正常にインストールができています。
node -v
package.jsonの作成
package.json
とは、プログラムがたくさん入ったファイルみたいな感じです(今回は、「とりあえずこのファイルが必要なんだな」くらいで大丈夫です)。
まず、コマンドラインから任意(メディアクエリをまとめたいファイルがある)フォルダに移動します。
cd C:¥Users¥〇〇¥yourfile
↑Windowsのフォルダーの移動のコマンド↑
cd /Users/〇〇/yourfile
↑Macのフォルダーの移動のコマンド↑
cdの後ろの半角スペースを忘れずに入力して下さいね。
コマンドを入力した後は、Enterキー で実行します(これから下の説明でも同じ)。
ちなみに、「cd」というのは、チェンジ・ディレクトリの略です。
フォルダの移動が成功していると、自分の指定したフォルダの階層(C:文字列)が表示されていると思います。
次に、下記のコマンドを実行すると、package.jsonファイルが生成されると思います。
npm init -y
このファイルは、触らなくてOKなので、次に進みましょう!
Gulpのインストール
ここで、下記のコマンドからGulpをインストールします。
npm i -D gulp
インストールが完了すると、「node_modules」というフォルダが生成されていると思います。
これで、Gulpが使える状態になりました!
Scssをコンパイルできるように設定
ここまで準備できたら、もう少しですよ!
まずは、Scssをコンパイルするために下記の2つをインストールします。
・Gulp本体
・glup-sass(コンパイルするプラグイン)
npm i -D gulp gulp-sass
mqpackerをインストール
次にコンパイルした後に、今回の目的であるメディアクエリをまとめるために、下記の4つをインストールします。
一応、そのほかにも便利なものを入れています。
- PostCSS(cssをコンパイルできる)
- mqpacker(メディアクエリをまとめるプラグイン)
- autoprefixer(ベンダープレフィックスを自動付与)
- declaration-sorter(プロパティの順序を揃える)
npm i -D css-mqpacker gulp-postcss autoprefixer css-declaration-sorter
gulpfile.jsを作成する
フォルダの直下に、「gulpfile.js」というファイルを作成します。
作成した「gulpfile.js」に下記コードをコピペして下さい。
// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var mqpacker = require("css-mqpacker");
var cssdeclsort = require("css-declaration-sorter");
// scssの監視タスクを作成する
gulp.task("default", function () {
// scssファイルを監視
return gulp.watch("sass/*.scss", function () {
// scssの更新があった場合の処理
// scssファイルを取得
return (
gulp
.src("sass/*.scss")
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: "compressed",
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on("error", sass.logError)
)
// sassの後に指定
.pipe(postcss([cssdeclsort({ order: "smacss" })]))
.pipe(postcss([autoprefixer()]))
.pipe(postcss([mqpacker()]))
// cssフォルダー以下に保存
.pipe(gulp.dest("css"))
);
});
});
scssフォルダの中にある全てのscssファイルを取得(*をstyleに変えるとstyle.scssを指定できる)。
アウトプットスタイルの指定。
メディアクエリをまとめる
尚、sassの後にmqpackerを指定すること。
cssフォルダの中にアウトプットする。
処理を実行する
最後に、コマンドで下記の記述をしたら、メディアクエリをまとめたcssファイルがcssフォルダの中に、アウトプットされます!
npx gulp
最初にこれができた時には、僕は感動しました(笑)
まとめ
いかがでしたでしょうか
他のブログ記事のやり方では、なかなかうまくいかず、試行錯誤するうちに、自分で最初から最後まで出来るようになったので、初めてメディアクエリをまとめるという方のために、導入から最後まで分かりやすくまとめておきました!
Gulpを使えば、もっと幅広く機能があるので、他にも色々調べて、試してみるといいかもですね!
以上、アサル(ASAL)でした!