fv17の日記 - Coding Every Day

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

CSSプリプロセッサとは - Sass(SCSS)、PostCSS、Stylus、Less

CSSプリプロセッサとは

CSSをよりプログラミングに近い形で表現し、生のCSSよりも可読性や保守性を向上させた言語のこと。CSSにはない、ネスト(入れ子構造)や変数などといった概念があり、より簡潔に、分かりやすく記述することができる。

SassとSCSS

SassとScssの詳細は下記リンク先が詳しい。
Sass(SCSS)でCSSコーディングを効率化・メリットと使い方を知る | Qookie Tech

簡単にいうと、もともとメタ言語としてSassが存在していたが、よりCSSチックに書けて学習コストを減らして、既存プロジェクトに導入しやすいようにしたのがSCSS。

SCSSが現在普及率が最も高いため、習得優先度も高い。
と言っても、CSSを知っていればそれほど学習コストは高くない。

公式ドキュメント

Sass: Sass Basics

SassとScssのどちらの記法が良いか?

Sass vs. SCSS: which syntax is better?

PostCSS

2013年に登場。
2018年現在、Facebook, GitHub, Google, Qiitaで使われはじめているが、普及率はSassに劣る。
ただし、市民権を得たなどと書かれていることが多く、今後普及率が上がっていく可能性あり。

Stylus

割愛。読み方は、スタイラス
Lessと同様に、入った現場が使っていれば覚えれば良いという温度感。

Less

割愛。
ほとんど使われていない、今から採用する理由がない、などと書かれていることが多いため無視。