🤔

Sassを使わずにPostCSSだけでCSSを書く理由

2021/03/13に公開

はじめに

Sass とは

  • Sass は現在の CSS のコーディング環境のデファクトスタンダードである。
  • SASS 記法と SCSS 記法の 2 種類がある。(現在主に利用されているのは SCSS 記法)
  • CSS を効率よく書くための便利な機能が含まれている。
  • コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。

PostCSS とは

  • PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。
  • 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。
  • Sass との組み合わせでもよく利用される。Autoprefixerstylelintも 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 の普及を進める予定 🚀)

GitHubで編集を提案
株式会社ナンバーフォー

Discussion