SASSを書いていると、どうしてもメディアクエリを細切れに記述する事になります。

細切れのままCSSにコンパイルするのはサイトの読み込み速度に悪影響ですし、何より可読性が悪くなるので、メディアクエリ毎にまとめる必要があります。

 

今回は、PostCSSのプラグイン「mqpacker」を使ってメディアクエリをまとめる手順を書いていきます。

 

スポンサーリンク

PostCSSの「mqpacker」でメディアクエリをまとめる

まず簡単に環境を整えていきます。

Macの場合はターミナル、Windowsの場合はコマンドプロンプトを使ってプロジェクトフォルダに移動します。

コマンドを入力して以下のプラグインをインストール

  • gulp
  • gulp-sass

 

npm install --save-dev gulp
npm install --save-dev gulp-sass

 

 

さらに、メディアクエリをまとめる為の「mqpacker」をインストールするのですが、

mqpackerを使う為には「postcss」を一緒にインストールしておく必要があります。

 

コマンドを入力して以下のプラグインをインストール

  • gulp-postcss
  • css-mqpacker

 

npm install --save-dev gulp-postcss
npm install --save-dev css-mqpacker

 

 

これで4つのプラグインをインストールできました。

次に「gulpfile.js」を作成して以下のように記述しておきます。

 

【gulpfile.js】

'use strict'
var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var mqpacker = require('css-mqpacker');

gulp.task('sass', function(){
  gulp.src(['./sass/**/*.scss', './sass/**/*.sass'])
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([mqpacker()]))
    .pipe(gulp.dest('./css'));
});
gulp.task('default', ['sass']);

 

 

8行目、11行目は自分の環境に合わせてフォルダ構成を変えてください。

上記の例では、「sass」フォルダ内にstyle.scssを作成しておいて、gulpでコンパイルすると「css」フォルダ内にstyle.cssを生成させます。

「mqpacker」によるデスクトップファーストのコンパイル（max-width)

プラグインのインストールと、「gulpfile.js」の用意が出来たので、

次はコンパイルするSASSファイルを作成します。

 

【style.scss】

div.box1{
    font-size: 38px;
    @media only screen and (max-width: 1216px){
        font-size: 35px;
    }
    @media only screen and (max-width: 980px){
        font-size: 28px;
    }
    @media only screen and (max-width: 768px){
        font-size: 26px;
    }
}

div.box2{
    margin-bottom: 100px;
    @media only screen and (max-width: 1216px){
        margin-bottom: 80px;
    }
    @media only screen and (max-width: 980px){
        margin-bottom: 50px;
    }
    @media only screen and (max-width: 768px){
        margin-bottom: 30px;
    }
}

div.box3{
    padding: 50px;
    @media only screen and (max-width: 1216px){
        padding: 40px;
    }
    @media only screen and (max-width: 980px){
        padding: 35px;
    }
    @media only screen and (max-width: 768px){
        padding: 30px;
    }
}

 

 

上記のように細切れでメディアクエリを指定することになります。

さらに、「max-width」でメディアクエリを指定しているところに注目してください。

この書き方は、デスクトップファーストという書き方で、Webサイトをデスクトップ表示のデザインからコーディングしていく方法になります。

 

それでは以下のコマンドでSASSをコンパイルしてみてください。

 

npx gulp

 

 

生成されるCSSは以下のようになります。

メディアクエリ毎にまとめてCSSが生成されているところに注目してください。

 

【style.css】

div.box1 {
  font-size: 38px;
}

div.box2 {
  margin-bottom: 100px;
}

div.box3 {
  padding: 50px;
}

@media only screen and (max-width: 1216px) {
  div.box1 {
    font-size: 35px;
  }
  div.box2 {
    margin-bottom: 80px;
  }
  div.box3 {
    padding: 40px;
  }
}

@media only screen and (max-width: 980px) {
  div.box1 {
    font-size: 28px;
  }
  div.box2 {
    margin-bottom: 50px;
  }
  div.box3 {
    padding: 35px;
  }
}

@media only screen and (max-width: 768px) {
  div.box1 {
    font-size: 26px;
  }
  div.box2 {
    margin-bottom: 30px;
  }
  div.box3 {
    padding: 30px;
  }
}

 

さらに注目すべきポイントは、メディアクエリの順番です。

max-widthで書かれたデスクトップファーストの書き方では、デスクトップのデザインを先に作っておいて後からタブレットやスマホ用のデザインを適用させるので、

生成されるCSSの順番は以下のように、

 

@media only screen and (max-width: 1216px){
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 768px){
}

 

widthの値が小さいCSSで上書きされるように生成されます。


スポンサーリンク

「mqpacker」によるモバイルファーストのコンパイル（min-width)

次はモバイルファーストの例です。

SASSを以下のように、「min-width」で記述することでwidthの小さいモバイルのデザインからコーディングしていきます。

 

【style.scss】

div.box1{
    font-size: 38px;
    @media only screen and (min-width: 1216px){
        font-size: 35px;
    }
    @media only screen and (min-width: 980px){
        font-size: 28px;
    }
    @media only screen and (min-width: 768px){
        font-size: 26px;
    }
}

div.box2{
    margin-bottom: 100px;
    @media only screen and (min-width: 1216px){
        margin-bottom: 80px;
    }
    @media only screen and (min-width: 980px){
        margin-bottom: 50px;
    }
    @media only screen and (min-width: 768px){
        margin-bottom: 30px;
    }
}

div.box3{
    padding: 50px;
    @media only screen and (min-width: 1216px){
        padding: 40px;
    }
    @media only screen and (min-width: 980px){
        padding: 35px;
    }
    @media only screen and (min-width: 768px){
        padding: 30px;
    }
}

 

以下のコマンドでコンパイルします。

 

npx gulp

 

 

生成されるCSSは以下のようになります。

 

【style.css】

div.box1 {
  font-size: 38px;
}

div.box2 {
  margin-bottom: 100px;
}

div.box3 {
  padding: 50px;
}

@media only screen and (min-width: 768px) {
  div.box1 {
    font-size: 26px;
  }
  div.box2 {
    margin-bottom: 30px;
  }
  div.box3 {
    padding: 30px;
  }
}

@media only screen and (min-width: 980px) {
  div.box1 {
    font-size: 28px;
  }
  div.box2 {
    margin-bottom: 50px;
  }
  div.box3 {
    padding: 35px;
  }
}

@media only screen and (min-width: 1216px) {
  div.box1 {
    font-size: 35px;
  }
  div.box2 {
    margin-bottom: 80px;
  }
  div.box3 {
    padding: 40px;
  }
}

生成されたメディアクエリの順番を見てください。 widthの幅が大きいもので上書きされているところに注目してください。

@media only screen and (min-width: 768px){
}
@media only screen and (min-width: 980px){
}
@media only screen and (min-width: 1216px){
}

 

 

モバイルのデザインを先に制作して、タブレット、デスクトップの順番でデザインを上書きしていく形になります。widthの大きいメディアクエリで上書きしていく順番でCSSが生成されます。

スポンサーリンク