クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め

先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。

CodePen Settingの旅。
前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。
アルトいいねのAltCSS!え?オルトと読むって?まぁそういう人もオルト。

目次:

※参考:CSSの基本についてはこちら
【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3

LESS

またまたCodePenのSettingを上から順番にいく。
最初はLESS。見た感じは通常のCSSに似ていて、そこに便利な書き方が加わっている感じ。

LESSの主な記法

  • ネスト(階層化)
    LESSはdivのネストの階層化ができる。 例えば下記の「#nest」の中に「p」があるが、これは「#nest p」を意味する。
    インデントはそんなに厳密でじゃでなくても解釈してくれるようだ(?)
  • セレクタの参照
    「&」の後に擬似クラスを繋げると親セレクタを参照する。
    例えば下記の「.bikou」の中の「&:before」は「.bikou:before」を意味する。

これはHTMLとほぼ同じ構造になっていて見やすいのではないだろうか!
CSSの記述量も減っているし、HTML内にBEMのような長いclassをつけなくてもいい。
また、裸のCSSもそのまま活きるので部分的な書き換えも可能。

LESSのコンパイルはNodeでできるらしい。(Rubyでもできる?)
また、コンパイルしなくても「less.js」というJSファイルをリンクすることで読み込めるようだ。jQueryみたい。

SCSS

2番目はSCSS。基本的な書き方はLESSとほとんど同じなようだ。

SCSSの主な記法

  • ネスト
    SCSSもdivのネストの階層化ができる。
  • セレクタの参照
    SCSSもネストして「&」に擬似要素を付けると親セレクタを参照できる

こちらはRubyコンパイルする。

Sass

3番目はSass。元祖AltCSS。一番歴史が古い。
こちらはCSSとは違う独自の書き方。
(なお、2番目で紹介したSCSSはLESSの影響でSassから派生したらしい)

Sassの主な記法

  • 波括弧({})は不要で、代わりにインデントを入れる
  • コロン(:)の後に半角スペースが必要
  • 行末のセミコロン(;)は不要
  • 波括弧{}は不要
  • ネスト(階層化)
    Sassのネストは、インデントを入れなければならないが、直接のネストでなければ、同じ階層じゃないタグでも同じインデント数で行けるようだ。
    例えばpにインデントを一つ入れていて、その下のリストliはpから見たらulが並列で、liは一つ下だが、pとliは同じインデント数でもスタイルは適用された。
  • セレクタの参照
    (&)はインデントをもう一段階下げる必要があった。

文字数は少ない代わりにLESSやSCSSよりもインデントが厳密な感じがする。
コンパイルはSCSSと同様Ruby。そしてこの記法も「Rubyライク」とのことなので元々Rubyを書いててフロントに移行する人には親和性が高いのかもしれない。
こちらは裸のCSSはそのままでは活きないため、全て書き換える必要がある。

Stylus

4番目はStylus。LESSとSASSのいいとこ取りと言われるそうな。

Stylusの主な記法

Stylusはフレキシブルで色々な書き方ができる。

  • LESS、SCSSのような書き方
  • Sassのような書き方
  • さらに省略した書き方
    そして、これらが混在しててもOK!!

LESS、SCSSのような書き方

LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。 RubyライクでスタイリッシュだったSASSもLESSの影響でCSSに近いSCSS記法を後から作った。 そしてStylusも同様の書き方ができる。 「#less」の段落はその書き方で書いています。

Sassのような書き方

波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。 覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。 そしてStylusも同様の書き方ができる。 「#sass」の段落はその書き方で書いています。

さらに省略した書き方

そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。 「#kihou」の段落でいくつか省略をテストして見た。

  • テスト1. コロンもセミコロンも省略
  • テスト 2. コロンだけ省略
  • テスト3. セミコロンだけ省略
  • テスト4. 何も省略しない

→結果. 全部効いた!フレキシブル!
※親要素の参照は「&」。これはLESSもSassも一緒。

StylusのコンパイルもNode.jsで行う。
裸のCSSや他の記法も活きるため、既存サイトの修正にフレキシブルに対応できそう。

PostCSS

PostCSSは新し目のメタ言語で、LESSやSASSと同じようなことができるがコンセプトは少し違うようだ。

プラグイン

必要な機能をプラグインで加えていく。
プラグインは個人が自由に作ることができるため、様々な種類が公開されている。
cssnextなどのプラグインは将来W3Cが採択する予定の記法を先取りして使用できる。
プラグインは「@use hogehoge;」という感じで入れるようだ。

nested

SASSやLESSのようにネストでかけるプラグイン。&で繋ぐ。

cssnext

W3Cが将来採用する予定の書き方ができる。例えば変数は「:root」で設定して「var(--hoge);」に適用される。 他の記法で変数についてまだ触れなかったがLESSは「@」、SASSは「$」で記号が異なる。
CSSの変数は将来的には「--」が採用されそうなので、PostCSSで慣れておくといいかもしれない。

なお、PostCSSのコンパイルもNodeのようです。コンパイルが早い!のが定評らしい。

まとめ

実際に触ってみて下記のような印象を持ちました。

  • CSSと似た書き方でより便利に書きたい→LESS、SCSS。
    コンパイルをNodeで行いたい→LESS。
    いや、Rubyで行いたい→SCSS。
  • コンパイルRuby。さらに書き方も全てRubyライクでスタイリッシュに行きたい!→Sass
  • いろんな書き方をフレキシブルに混在させたい。 →Stylus
    または他の人が作ったCSSを修正することになった。→Stylus
  • 次世代CSSがどのような書き方になるか体験したい。 →PostCSS
    みんなが作った豊富なプラグインを体験したい(jQueryWordPress的なシェア文化)→PostCSS

今回、変数、関数による値の代入は深くやらなかったが、例えば分散して書かれた同じ色やサイズを全部を修正しなきゃ、みたいな経験は皆さんあると思います。変数、関数はそういう時に強力な機能と思います。他にも演算など便利な機能がまだまだあるようです。
個人的にはBEMなどclass名が長くなるCSS設計をするよりもAltCSSで設計する方がいいのかもしれない、と感じました。

CodePen Settingの旅。次回は「AltJS」を体験しましょう〜。


※参考:HTMLテンプレートエンジン、AltCSS、AltJSまとめました!

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと idr-zz.hatenablog.com