PostCSSでSassをもっと楽に

### [gulpのタスクを追加して便利な環境にしよう](https://qiita.com/test6tyome/items/6b7c3c84dcace8cc411f) ← 前回のやつ
 
# PostCSS

PostCSSプラグイン　[PostCSS.parts](https://www.postcss.parts/)

その他プラグイン一覧






|    プラグイン名    |    プラグイン機能    |    参考ページ    |
|:-----------------|:-----------------|:------------------|
| stylelint        | CSSの構文チェックツール|[stylelintの環境構築](https://qiita.com/buchiya4th/items/01b4ad050b7c59b48539)|
| column           | stylelint        |       column       |
| will             | stylelint        |        will        |
| be               | stylelint        |         be         |
| left             | stylelint        |       center       |
| aligned          | stylelint        |      aligned       |





###PostCSSのインストール
まずは、npmから「gulp-postcss」パッケージをインストール

```terminal:cmd
npm install --save-dev gulp-postcss
```
パッケージをインストールしたら、gulpfile.jsに読み込みの設定をします。

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
// 「gulp-postcss」を読み込む
var postcss = require('gulp-postcss');
```

##ベンダープレフィックスを自動付与する
Autoprefixerはベンダープレフィックスを自動付与してくれるプラグインでPostCSSでは一番よく使われてる定番プラグインです。
Autoprefixerがあれば、わざわざベンダープレフィックスを記述する必要がなくなります。

###インストールと設定
まずは、npmから「gulp-autoprefixer」パッケージをインストール

```terminal:cmd
npm install --save-dev gulp-autoprefixer
```
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([autoprefixer()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
// 「gulp-autoprefixer」を読み込む
var autoprefixer = require('autoprefixer');

gulp.task('sass', function () {
	return gulp.src('./sass/**/*.scss')
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});	
	.pipe(sourcemaps.init());
	.pipe(saccGlob());
	.pipe(sass({outputStyle:'expanded'}))
	// 「sass」の後に指定
	.pipe(postcss([autoprefixer()]))
	.pipe(sourcemaps.write());
	.pipe(gulp.dest('css'));
});
```
その他に、対象ブラウザを設定したり、バージョン指定することなどもできます。

##CSSプロパティの記述順を自動でソートする
CSSプロパティの順番を気にする方用に「css-declaration-sorter」

###インストールと設定
まずは、npmから「css-declaration-sorter」パッケージをインストール

```terminal:cmd
npm install --save-dev css-declaration-sorter
```
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([cssdeclsort({order:'smacss'})])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

// 「css-declaration-sorter」を読み込む
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');

gulp.task('sass', function () {
	return gulp.src('./sass/**/*.scss')
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});	
	.pipe(sourcemaps.init());
	.pipe(saccGlob());
	.pipe(sass({outputStyle:'expanded'}))

	// 「sass」の後に指定
	.pipe(postcss([cssdeclsort({order:'smacss'})])
	// alphobetically アルファベット順に
	// smacss SMACSSが定義するレイアウトに最も重要な順に
	// concentric-css Concentric CSSが提唱するボックスモデルの外側から内側の順に
		
	.pipe(postcss([autoprefixer()]))
	.pipe(sourcemaps.write());
	.pipe(gulp.dest('css'));
});
```

##バラバラになったメディアクエリをまとめる
「CSS MQPacker」を使えば、バラバラに記述されたメディアクエリをまとめてくれます。

###インストールと設定
まずは、npmから「css-mqpacker」パッケージをインストール

```terminal:cmd
npm install --save-dev css-mqpacker
```
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([mqpacker()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');
// 「css-mqpacker」を読み込む
var mqpacker = require('css-mqpacker');

gulp.task('sass', function () {
	return gulp.src('./sass/**/*.scss')
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});	
	.pipe(sourcemaps.init());
	.pipe(saccGlob());
	.pipe(sass({outputStyle:'expanded'}))
	// 「sass」の後に指定
	.pipe(postcss([mqpacker()]))
	
	.pipe(postcss([cssdeclsort({order:'smacss'})])
	.pipe(postcss([autoprefixer()]))
	.pipe(sourcemaps.write());
	.pipe(gulp.dest('css'));
});
```