CSSプリプロセッサとは - Sass(SCSS)、PostCSS、Stylus、Less
CSSプリプロセッサとは
CSSをよりプログラミングに近い形で表現し、生のCSSよりも可読性や保守性を向上させた言語のこと。CSSにはない、ネスト(入れ子構造)や変数などといった概念があり、より簡潔に、分かりやすく記述することができる。
それぞれのプリプロセッサの違い
下記リンク先に概要あり
CSS - CSSプリプロセッサ(メタ言語)の選定基準・特徴の理解について(110871)|teratail
SassとSCSS
SassとScssの詳細は下記リンク先が詳しい。
Sass(SCSS)でCSSコーディングを効率化・メリットと使い方を知る | Qookie Tech
簡単にいうと、もともとメタ言語としてSassが存在していたが、よりCSSチックに書けて学習コストを減らして、既存プロジェクトに導入しやすいようにしたのがSCSS。
SCSSが現在普及率が最も高いため、習得優先度も高い。
と言っても、CSSを知っていればそれほど学習コストは高くない。
公式ドキュメント
SassとScssのどちらの記法が良いか?
Tips - AirbnbのSassとCSSのコーディング規約
GitHub - airbnb/css: A mostly reasonable approach to CSS and Sass.
PostCSS
2013年に登場。
2018年現在、Facebook, GitHub, Google, Qiitaで使われはじめているが、普及率はSassに劣る。
ただし、市民権を得たなどと書かれていることが多く、今後普及率が上がっていく可能性あり。
Stylus
割愛。読み方は、スタイラス。
Lessと同様に、入った現場が使っていれば覚えれば良いという温度感。
Less
割愛。
ほとんど使われていない、今から採用する理由がない、などと書かれていることが多いため無視。