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年にサポート終了しています。
Read next
- 2021年10月17日フロントエンド・コーダーが知っておきたい画像の知識
- 2021年10月17日開発環境あれこれ(gulpやwebpackなど)
- 2021年10月18日フォントサイズの単位について