はじめに

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;
  }
}

https://caniuse.com/css-nesting

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);
}

https://caniuse.com/css-variables

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);
}

https://caniuse.com/calc

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