はじめに
Sass とは
- Sass は現在の CSS のコーディング環境のデファクトスタンダードである。
- SASS 記法と SCSS 記法の 2 種類がある。（現在主に利用されているのは SCSS 記法）
- CSS を効率よく書くための便利な機能が含まれている。
- コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。
- libsass が先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。
PostCSS とは
- PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。
- 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。
- Sass との組み合わせでもよく利用される。Autoprefixerやstylelintも PostCSS を利用している。
CSS を効率よく書くための機能
ネスト
SCSS
/** input */
.block {
display: block;
&__element {
display: block;
}
}
/** output */
.block {
display: block;
}
.block__element {
display: block;
}
CSS
/** input */
.block {
display: block;
& element {
display: block;
}
}
PostCSS(postcss-nested)
/** input */
.block {
display: block;
&__element {
display: block;
}
}
/** output */
.block {
display: block;
}
.block__element {
display: block;
}
PostCSS(postcss-nesting)
/** input */
.block {
display: block;
& element {
display: block;
}
}
/** output */
.block {
display: block;
}
.block element {
display: block;
}
変数
SCSS
/** input */
$text-color: #333;
.block {
color: $text-color;
}
/** output */
.block {
color: #333;
}
CSS
/** input */
:root {
--text-color: #333;
}
.block {
color: var(--text-color);
}
PostCSS(postcss-custom-properties)
/** input */
:root {
--text-color: #333;
}
.block {
color: var(--text-color);
}
/** output */
:root {
--text-color: #333;
}
.block {
color: #333;
color: var(--text-color);
}
演算
SCSS
/** input */
$text-size: 16px;
.block {
font-szie: $text-size * 2;
}
/** output */
.block {
font-szie: 32px;
}
CSS
/** input */
:root {
--text-size: 16px;
}
.block {
font-szie: calc(var(--text-size) * 2);
}
PostCSS(postcss-calc)
/** input */
:root {
--text-size: 16px;
}
.block {
font-szie: calc(var(--text-size) * 2);
}
/** output */
:root {
--text-size: 16px;
}
.block {
font-szie: 32px;
}
ファイルの分割管理
SCSS
@use "variables";
PostCSS(postcss-import)
@import "variables.css";
/** or */
@import "variables.pcss";
Sass を使うメリット・デメリット
🌞 シェアが多い分、周りに知っている人が多い。
🌞 Sass を導入するだけで、一通り便利な機能が利用できるため、環境構築コストが低い。
☔ CSS に加えて、Sass の学習コストがかかる。
☔ Sass の仕様変更をキャッチアップする必要がある。
PostCSS を使うメリット・デメリット
🌞 [add] ネイティブ CSS も機能がどんどん追加されているので、ほとんどプラグイン追加しなくても Sass と同じようなことができる
🌞 必要な機能(プラグイン)を自分で選んで組み合わせられる。
🌞 最新の CSS の polyfill プラグインを利用するのであれば、CSS の学習コストのみでよい。
☔ 周りに知っている人が少ない。
☔ プラグインを選定する必要があるので、環境構築コストがかかる。
PostCSS を選んだ理由
- Sass にはない便利な機能を追加できる。
- Sass に使わない・使ってほしくない機能がそこそこある。（
@extendなど） - 一度プラグインを選定してしまえば、以降はあまり環境構築コストはかからない。(postcss-preset-envを使うと楽。)
- Sass と PostCSS を組み合わせて利用するのが辛い。（npm scripts でデータの受け渡しが遅い 🐌etc...）
- 自分でパイプラインを考えるのが好き 🤔
最後に
慣れると PostCSS は便利だが、Sass のシェアが多いことに変わりはないので、
まずは、Sass を使ってみたうえで不満があれば、PostCSS を併用するなり、PostCSS に移行するのがよいと思う。
（弊社内では引き続き PostCSS の普及を進める予定 🚀）
Discussion