CSSプリプロセッサについて（SassやPostCSS）

目次

• 種類
• Sass
  • SASS
  • SCSS
  • PostCSS
  • その他
• SassとPostCSSの組み合わせ
• importルールの廃止とDart Sass

種類

Sass

Sassには記法が2つあります。いつも書いている「サス」というのは、後述のSCSSのことで、実はSASSが存在します。
SCSSの方が閉じかっこがあって分かりやすかったり、Sassが分からなくてもCSSで書くこともできるので、「サス」というと一般的にはSCSSの方を指すようになりました。

SASS

拡張子は .sass
SASS記法で書くとこうなります

div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;

SCSS

拡張子は .scss
SCSS記法で書くとこうなります。

div {
  margin: 0 auto;
  p {
    font-size: 1em;
  }
}

Sassには簡単に書き方を試せるPlaygroundがあります。出力がよく分からんというときは、ここで試してみるといいです
https://www.sassmeister.com/

PostCSS

一応プリプロセッサの一つとして挙げられますが、PostCSS自体はCSSを加工しやすいようにパースし、結果をCSSとして出力するだけです。

PostCSS用のプラグインを利用することで、SassのようなCSSのプリプロセッサとして使えます。

例えば、 postcss-nestedというプラグインを使えば、ネスト（入れ子）で書けるようになります。

PostCSSのメリットとしては、自分で必要な機能だけを使った環境を作れることと、最新のCSSのpolyfillプラグイン（まだブラウザで対応されてないが、後に使えるようになる予定のCSS）を使えば、学習コストはCSSだけになります。

一方で環境構築のコストや管理の手間はかかります

その他

StylusやLessというのもあります。かなり前は聞きましたが、もう聞かなくなりました。
よっぽど物好きでない限りはSassでいいでしょう

SassとPostCSSの組み合わせ

SassとPostCSSを組み合わせた環境はよく見られます。

Sassで生成されたCSSをさらにPostCSSで後処理をします。

例えば以下のようなことをします。

• autoprefixer: プレフィックスを自動でつけてくれる
• css-mqpacker: 同じメディアクエリをまとめてくれる
• cssnano: CSSの圧縮

gulp-autoprefixer というgulp用のプラグインもありますが、PostCSSとautopurefixerを使う理由は gulp-autoprefixerは結局PostCSSをautoprefixerを内包してるだけのgulp用ラッパープラグインだからです。なので、autoprefixerはバージョンアップしてるのに、 gulp-autoprefixerはまだ対応されてないということも起こりえます。

importルールの廃止とDart Sass

Sassの @importルールは廃止されることが予定されています。 @importは別のSassファイルを読み込んで変数を利用したり、一つにまとめることができます。

原文の予定では2022年の10月1日に廃止されます。
https://sass-lang.com/blog/the-module-system-is-launched#future-plans
@importは @useや @forwardといったルールに置き換わります。

このルールが実装されてるのがDart Sassです。Node Sassはもう開発が行われておらず非推奨になっています。
gulp-sassは現状はデフォルトではNode Sassですが、設定すればDart Sassが使えるので、今からDart Sassを使っておきましょう。

https://www.npmjs.com/package/node-sass

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

Node SassはC++で開発されているLibSassをNode.jsで使えるようにしているラッパーライブラリです。
Dart SassはDartで開発されています。

さらに前にはRuby Sassがありましたが、2019年にサポート終了しています。