KHOM LOI ON

【PostCSS】SassをやめてPostCSSでCSSに変換するようにした

2021年6月28日現在、PostCSSのみの環境には移行できていません。

ここ数年、CSSはSass（scss記法）で書いて、npm-scriptsでcssに変換するという流れでした（Compassを利用したり、gulpで変換したりな時期もありましたが）。特に不満はなかったのですが、なんとなくPostCSSだけでいけそうだったので、SassをやめてPostCSSだけの環境に移行してみました。

Sassのときのこと

正確にはautoprefixerやcss-declaration-sorter、stylelintなどは利用していたので、Sass＋PostCSS環境からPostCSSのみの環境への移行。

主に利用していたSassの機能は、

  • 変数
  • mixin
  • ファイルのインポート
  • ネスト

くらいで、その他、rgbaに16進数での色指定ができることが便利だなとか、たまにif文書いたりする程度でした。

改めて書き出してみると、大してSassの機能を利用してなかったですね…。

Sassの機能をPostCSSのプラグインで代用する

変数

npm install postcss-css-variables --save-dev

mixin

npm install postcss-mixins --save-dev

ファイルのインポート

npm install postcss-import postcss-import-ext-glob --save-dev

postcss-import-ext-globは複数のcssをまとめて読み込むことができるパッケージです。postcss-import-ext-globはpostcss-importより前に読み込む必要があります。

postcss-import-ext-globを使わない場合

@import "components/form/input.css";
@import "components/form/submit.css";

postcss-import-ext-globを使う場合

@import-glob "components/**/*.css";

ネスト

npm install postcss-nested --save-dev

その他導入したプラグイン

参考サイト

CSS