PostCSSにはネストが使えるようになるプラグインがいくつかあるので比較してみました。

PostCSSの導入記事はこちら

PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン

gulpでPostCSSまでインストールしたらgulpfile.jsに以下のコードを書いておきます。

var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task("css", function() {
  return gulp.src('./src/css/*.css')
    .pipe(postcss([]))
    .pipe(gulp.dest('./src/'))
});

1. postcss-nested
2. postcss-nesting

postcss-nested

Sassのような入れ子構造が使えるようになるプラグイン。

インストール

npm i postcss-nested -D

これが

.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}

こう

.phone_title {
    width: 500px;
}
@media (max-width: 500px) {
    .phone_title {
        width: auto;
    }
}
body.is_dark .phone_title {
    color: white;
}
.phone img {
    display: block;
}

postcss-nesting

こちらはW3Cの仕様に近い形でネストを使うことができます。

CSS Nesting Module Level 3

インストール

npm i postcss-nested -D

これが

.list {
  width: 100%;
  &__item {
    color: red;
    font-size: 24px;
  }
  & a {
    color: #333;
    &:hover {
      color: blue;
    }
  }
}

こう

.list {
  width: 100%
}
.list__item {
  color: red;
  font-size: 24px
}
.list a {
  color: #333
}
.list a:hover {
  color: blue
}

セレクタの最後はセミコロンが省かれるようになっています。最後には必ずしも必要というわけではないんですね。知らなかった。

とはいえこのプラグインで省くのまで必要なのかGitHubでissueが立てられてました。

nested rules miss final semicolon

また、入れ子でプロパティの指定がない場合は、空ができちゃうんですよね。これもissueありました。

An empty rule is created if If there’s no property before a nested rule

@nestを使うルールでもいけます。

.list {
  width: 100%;
  &__item {
    color: red;
    font-size: 24px;
  }
  @nest & a {
    color: #333;
    &:hover {
      color: blue;
    }
  }
}

結果は先ほどと同じです。

さいごに

Sassを使っていた場合はPostCSS Nestedの方が移行は楽そうです。ただ、どうせならCSSの仕様に添いたいという場合はCSS Nestingがいいかと思います。セミコロンも最後がなくても大丈夫ですし、空指定は圧縮時に消すこともできます。

どちらを使うかはお好みで！