【Sass】おすすめプラグイン

###はじめに
アルバイトでSassを使ってるうちにPostCSSに救われているなーと感じることが多い今日この頃。
Sassは1人で開発する場合は導入・学習コストの方が高く感じ、コンパイルさえ出来ればいいか。。という感じになってしまいます。
でも1人で開発するでも便利なプラグインありますのでここで紹介させてください。

###対象
チーム開発を行う機会のない駆け出しエンジニアの方や学生

###目次
1,PostCSSとは
2,PostCSSのインストール
3,PostCSSのおすすめプラグイン

##１,PostCSSとは

PostCSSはNode.js製のCSS変換ツール。SassとCSSの両方に使える。

##2,PostCSSのインストール

Sass環境構築が完了していることを前提で話を進めます。

npm install --save-dev gulp-postcss

↑これだけでPostCSSのインストール完了です。

gulpfile.js

//var gulp = require('gulp');
//var sass = require('gulp-sass');
var postcss = require('gulp-postcss');

↑パッケージのインストールは完了したのでgulpfile.jsファイルに読み込む設定をします。

##3,PostCSSのオススメプラグイン
###Autoprefixcer
・ベンダープレフィックスを自動付与してくれるプラグイン。
（display:flex;をよく使うので便利だと感じました）
#####インストール方法
まずプロジェクトのディレクトリ直下で

npm install --save-dev autoprefixer

↑これでパッケージのインストールが完了したので
　　・gulpfile.jsに読み込み
　　・タスクに追加
の２つを行います。

gulpfile.js

//var gulp = require('gulp');
//var sass = require('gulp-sass');
//var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');/*Autoprefixerをgulpfile.jsに読み込ませる*/
gulp.task('sass', function() {
  //return gulp.src('./sass/**/*.scss')
    //.pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([autoprefixer()]))/*タスクにautoprefixerを追加*/
    //.pipe(gulp.dest('./css'));
});

###CSS-MQPakcer
・メディアクエリがバラバラの位置にコンパイルされるのを防ぎ、メディアクエリを綺麗にまとめるプラグイン。
（これを入れておくだけで、コンパイルされるCSSのコード量が大幅に減ったので必須だなと感じました。）
#####インストール方法
まずプロジェクトのディレクトリ直下で

npm install --save-dev css-mqpacker

↑これでパッケージのインストールが完了したので、Autoprefixerと同様に
　　・gulpfile.jsに読み込み
　　・タスクに追加
の２つを行います。

gulpfile.js

//var gulp = require('gulp');
//var sass = require('gulp-sass');
//var postcss = require('gulp-postcss');
var mqpacker = require('css-mqpacker');/*MQPackerをgulpfile.jsに読み込ませる*/
gulp.task('sass', function() {
  //return gulp.src('./sass/**/*.scss')
    //.pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([mqpacker()]))/*タスクにMQPackerを追加*/
    //.pipe(gulp.dest('./css'));
});

###おわりに
コピペして頂けたらすぐに使えると思います。
自分もまだSassを使い始めて1ヶ月ぐらいなのでもっと勉強していきます。
便利なのでSass勉強したての方はぜひインストールしてみてください！！