PostCSSをSCSS記法に近づける+便利にするためのプラグイン11選

PostCSSはプラグインの量が多く、同時に似てる名前のプラグインが乱立しつつあったので、「どれ使えばいいかわからない…」という状態になりました。

今回は、SCSS記法に近づけつつ便利にするために、最終的に選定したPostCSSプラグインを紹介したいと思います。

紹介していくプラグインを使用することでSCSS記法に近づけることはできますが、完全に再現には至りませんでした…。

プラグイン一覧

PostCSSは仕様上、プラグインの処理順序に出力結果が影響します。それを顧慮して、プラグインの適用順に紹介しています。

postcss-easy-import

GitHub: postcss-easy-import

node_modules/配下のCSSファイルや、*を用いたGlob Importにも対応しています。
@importでの読み込みで*を使うことができます。

@import "module/*";

ただし、連続でのインポートには未対応、Partial Import

css/
  style.css
  _reset.css
  _variable.css

上記構造の場合は、以下のGOODのように記述することでimportできます。

/* BAD */
@import "reset", "variable";


/* GOOD */
@import "_reset";
@import "_variable";

類似プラグイン

postcss-import

*での一括importには対応していません。また、拡張子も付ける必要があります。

postcss-sassy-import

デフォルトではnode_modules以下のパス指定がされていないです。また、postcss-sassy-mixinとの相性がよくないようで、mixinのincludeで「そんなmixinないよ」とエラーが出てしまいました。自分の環境だけなのかもしれませんが…。

postcss-extend

GitHub: postcss-extend

Sassのextend機能が使えます。挙動は全く同じです。


/* BEFORE */ %circle { border-radius: 50%; width: 100px; height: 100px; } .thumb { display: block; margin: 0 auto; } .thumb--cat { @extend %circle; @extend .thumb; background-image: url("images/cat.jpg"); } .thumb--dog { @extend %circle; @extend .thumb; background-image: url("images/dog.jpg"); } /* AFTER */ .thumb--cat, .thumb--dog { border-radius: 50%; width: 100px; height: 100px; } .thumb, .thumb--cat, .thumb--dog { display: block; margin: 0 auto; } .thumb--cat { background-image: url("images/cat.jpg"); } .thumb--dog { background-image: url("images/dog.jpg"); }

postcss-sassy-mixins

GitHub: PostCSS Sassy Mixins

Sassのmixinと同じ記法でmixinを定義・呼び出しできます。postcss-mixinはSCSSと記法が違ったので、同じ書き方ができるこちらを採用しました。

/* BEFORE */
@mixin img-center($url) {
  background-image: url($url);
  background-position: center center;
  background-repeat: no-repeat;
}
.container {
  @include img-center("images/bg.jpg");
}


/* AFTER */
.container {
  background-image: url("images/bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

postcss-nested

GitHub: PostCSS Nested

SCSSのネスト構造と&に近い構文で書けるようになります。

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

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

postcss-advanced-variables

GitHub: Advanced Variables

$varによる変数宣言と、条件式(@each@for@ifなど)を変換してくれるプラグインです。
エスケープの際の記法がSCSSだと#{$var}だったのに対し、このプラグインでは$(var)となっています。


/* BEFORE */ $ppap: pen, pineapple, apple, pen.; @each $word in $ppap { .ppap[data-ppap="$word"]:before { content: "$word"; } } /* AFTER */ .ppap[data-ppap="pen"]:before { content: "pen"; } .ppap[data-ppap="pineapple"]:before { content: "pineapple"; } .ppap[data-ppap="apple"]:before { content: "apple"; } .ppap[data-ppap="pen."]:before { content: "pen."; }

postcss-assets

GitHub: PostCSS Assets

画像のパスの変換をいい感じに変換してくれる+画像のピクセルサイズを取得できます。これだけのためにPostCSSを導入したいと思えるくらい便利です。Compass…

例えばpublic/images/ground.jpg(100×120[px])があった場合に、以下のように記述することで、自動的にピクセルサイズとパスの補完がされます。
実際にはbasePathの指定や相対パスの有効などが必要になります。詳しくはGitHubリポジトリを参照ください。

/* BEFORE */
.ground {
  background-image: resolve("ground.jpg");
  background-size: width("ground.jpg") height("ground.jpg");
}

/* AFTER */
.ground {
  background-image: url("../images/ground.jpg");
  background-size: 100px 120px;
}

また、以下のように書くとbase64形式のインライン画像も簡単に挿入できます。

/* BEFORE */
.inline {
  background-image: inline("inline_icon.png");
}

/* AFTER */
.inline {
  background-image: url('data:image/png;base64...');
}

postcss-calc

GitHub: PostCSS Calc

calc()内の値で計算出来るものは、自動で計算してcalc()を削除した状態に変換してくれます。

/* BEFORE */
.container {
  width: calc(100% * 6 / 12);
}

/* AFTER */
.container {
  width: 50%;
}

SCSSに近い書き方をするならpostcss-automathが一番近いですが、

  • 変換されるときとされないときの条件が不明瞭だった
  • postcss-calcの場合は変換されない場合でもcalc()なので正常に動作する

という理由からこちらを採用しました。

類似プラグイン

  • postcss-calc-function
  • postcss-math
  • postcss-automath

postcss-strip-inline-comments

GitHub: PostCSS strip inline comments

一行コメントを削除します。残したくないコメントなどだけ一行コメントにすることで、このプラグインでごっそり消してくれて地味に便利です。

autoprefixer

GitHub: Autoprefixer

Can I UseのAPIを利用して、ベンダープレフィックスを自動付与してくれるプラグインです。

css-mqpacker

GitHub: CSS MQPacker

メディアクエリをひとまとめにしてくれます。
モジュールごとにメディアクエリを指定して、あとで同じ値のセレクタをひとまとめにしてくれるので、import機能と併用することでさらに真価を発揮します。

/* BEFORE */
p {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  p {
    font-size: 15px;
  }
}

small {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  small {
    font-size: 15px;
  }
}

/* AFTER */
p {
  font-size: 18px;
}

small {
  font-size: 18px;
}

@media screen and (max-width: 960px) {
  p {
    font-size: 15px;
  }
  small {
    font-size: 15px;
  }
}

postcss-scss

GitHub: PostCSS SCSS

SCSS記法で記述されたファイルから、PostCSSの出力形式にパースしてくれます。
これを通すとこで、SCSS記法のようにかいてある.cssファイルをPostCSSで扱える形式に変換してくれます。

gulpのタスクに組み込む

gulpのタスクに追加してみるとこんな感じになります。PostCSSは、読み込む順番が出力に影響するので、読み込み順も考慮する必要があります。また、PostCSS SCSSだけ別の読み込み方法になります。

※別途各プラグインをnpm installしておきましょう。
※ES6+gulp4.0で書いていますので、個人の環境に合わせて書き換える必要があります。

import gulp from 'gulp';
import postcss from 'gulp-postcss';

const SRC = './src';
const DEST = './public';

gulp.task('postcss', () => {
    return gulp.src(`${SRC}/css/style.css`)
        .pipe(postcss([
          require('postcss-easy-import'),
          require('postcss-extend'),
          require('postcss-sassy-mixins'),
          require('postcss-nested'),
          require('postcss-advanced-variables'),
          require('postcss-assets')({
            loadPaths: [ 'images/' ],
            basePath: `${DEST}/`,
            relative: `${DEST}/`,
          }),
          require('postcss-calc'),
          require('postcss-strip-inline-comments'),
          require('css-mqpacker'),
          require('autoprefixer')({
            browsers: [
              'ie >= 10',
              'ios >= 8',
              'android >= 4.0'
            ]
          }),
        ], { syntax: require('postcss-scss') }))
        .pipe(gulp.dest(`${DEST}/`));
});

ファイル構造は以下のようなものを想定しています。

./
├── gulpfile.babel.js
├── node_modules/
├── package.json
├── public/
│   ├── images/
│   │   └── ...
│   └── style.css
├── src/
│   ├── css/
│   │   └── style.css
└── yarn.lock

さいごに

今回はSCSS記法に近づけるためのプラグインを多く紹介しましたが、postcss-assetsやautoprefixer、css-mqpackerなどはどの開発でもとても重宝するプラグインだと思います。
SCSS記法に近づけることで、Sassを使ってた人でも比較的楽に恩恵を授かることができるのがいいですね。

ぜひ、PostCSSへの乗り換えの判断材料としてご活用ください。

  • BLOG
  • >
  • web
  • >
  • PostCSSをSCSS記法に近づける+便利にするためのプラグイン11選