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

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

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

LESS
- LESSの主な記法
SCSS
- SCSSの主な記法
Sass
- Sassの主な記法
Stylus
PostCSS
まとめ

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

※2019/10/20：この記事上にソースコードがありませんでしたが、追記しました。

LESS

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

LESSの主な記法

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

HTMLコード

<section id="less">
<h1>LESS事始め</h1>
<p class="lede">CodepenのSettingの旅も遂にCSS編に突入。今回はLESSデス。<br>
それにしても、Codepen、予測変換機能があるといいなぁ<br>
あ、でもあれか。予測変換がない方が学習経験的にはいいのか。</p>
  <section id="nest">
    <h2>ネスト（階層化）</h2>
    <p>LESSはdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。<br>
      おお、これはHTMLとほぼ同じ構造になっていて<em>見やすい</em>のではないだろうか!<br>
      CSSの記述量も減っているし、HTML内にBEMのような長いclassをつけなくてもいい。<br>
      <span class="bikou">親セレクタの参照、LESSでもできてる？もう少し比較が必要か。</span>
    </p>
  </section>
</section>

LESSコード

#less h1 {
  color: red;
  font-size: 2em;
}

#less .lede {
  font-size: 0.8em;
}

#nest {
  background: #eee;
  padding: 20px;
  h2 {
    color: blue;
    font-size: 1.5em;
    line-height: 1.2;
    }
  p {
    em {
      font-weight: bold;
      color: brown;
    }
.bikou {
font-size: 0.8em;
&:before{
    content: "※";
}
}
  }
}

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

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

SCSS

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

SCSSの主な記法

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

HTMLコード

<section id="scss">
<h1>SCSS事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第2回。今回はSCSS。LESSに似てる？</p>
<section id="nest">
    <h2>ネスト（階層化）</h2>
    <p>SCSSもdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。<br>
      ん？この書き方はLESSとほぼまったく同じだ。<br>
 <span class="bikou">インデントについても厳密でじゃでなくても解釈してくれるようだ（？）</span>
    </p>
  </section>
  <section id="oya">
    <h2>親セレクタの参照</h2>
    <p>おそらくLESSにはないSCSS専用の機能。ネストして「&」に擬似要素を付けると親セレクタを参照できる<br>
 <span class="bikou">この尾行欄につけている「※」印は「.bikou:before」ではなく「&:before」だけで済んでいる。 </span>
</p>
  </section>
</section>

SCSSコード

#scss h1 {
  color: red;
  font-size: 2em;
}

#scss .lede {
  font-size: 0.8em;
}

#nest, 
#oya {
  background: #eee;
  padding: 20px;
  margin: 0 0 20px;
  h2 {
    color: blue;
    font-size: 1.5em;
    line-height: 1.2;
    }
  p {
    em {
      font-weight: bold;
      color: brown;
    }
.bikou {
font-size: 0.8em;
&:before {
    content: "※";
}
}
  }
}

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

（2020/04/26追記）

Node.jsのgulpでもコンパイルできました！

※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる - クモのようにコツコツと

Sass

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

Sassの主な記法

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

HTMLコード

<section id="sass">
<h1>Sass事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第3回。今回はSass。SCSSの姉妹メタ言語</p>
<section id="kihou">
    <h2>Sass記法</h2>
  <p>Sassの基本的な記法はこんな感じ</p>
  <ul>
    <li>波括弧（{}）は不要で、代わりにインデントを入れる</li>
    <li>コロン(:)の後に半角スペースが必要</li>
    <li>セミコロン(;）は不要</li>
    <li>波括弧{}は不要</li>

 <span class="bikou">文字数は少ないがLESSやSCSSよりも厳密な感じがする。</span>
    </p>
  </section>
<section id="nest">
<h2>ネスト（階層化）</h2>
<p>Sassのネストは、インデントを入れなければならないが、直接のネストでなければ、同じ階層じゃないタグでも同じインデント数で行けるようだ。<br>
 例えばpにインデントを一つ入れていて、その下のリストliはpから見たらulが並列で、liは一つ下だが、pとliは同じインデント数でもスタイルは適用された。<br>
 <span class="bikou">親セレクタの参照（&）はインデントをもう一段階下げる必要があった。</span>
    </p>
  </section>
</section>

Sassコード

#sass
  h1 
    color: red
    font-size: 2em
  p
    font-size: 0.8em

#kihou, #nest
  background: #eee
  margin: 0 0 20px
  padding: 10px
  h2
    color: blue
  p
    font-size: 1em
  li
    font-size: 0.8em
  .bikou
    font-size: 0.8em
    &:before
      content: '※'

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

（2020/04/26追記）

SassやSCSSはNode.jsのgulpでもコンパイルできるようです！

※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる - クモのようにコツコツと

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. コロンだけ省略
テスト３. セミコロンだけ省略
テスト4. 何も省略しない

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

HTMLコード

<section id="stylus">
<h1>Stylus事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第4回。今回はStylus。LESSとSASSのいいとこ取りと言われるそうな。</p>
<section id="kihou">
    <h2>Stylus記法</h2>
  <p>Stylusはフレキシブルで色々な書き方ができる。</p>
  <ul>
    <li>LESS、SCSSのような書き方</li>
    <li>Sassのような書き方</li>
    <li>さらに省略した書き方</li>
    </ui>
 <span class="bikou">そして、これらが混在しててもOK！！</span>
    </p>
  </section>
<section id="less">
<h2>LESS、SCSSのような書き方</h2>
<p>LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。<br>
Rubyと似た書き方でスタイリッシュだったSASSもLESSの影響で、CSSに近いSCSS記法を後から作った。<br>
Stylusも同様の書き方ができる。<br>
 <span class="bikou">この段落はその書き方で書いています。</span>
    </p>
  </section>
  
<section id="sass">
<h2>Sassのような書き方</h2>
<p>波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。<br>
SassはRubyで動き、記法もRubyと似ているらしい。覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。<br>
そしてStylusも同様の書き方ができる。<br>
 <span class="bikou">この段落はその書き方で書いています。</span>
    </p>
  </section>

  <section id="stylus">
<h2>さらに省略した書き方</h2>
<p>そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。<br>
  <span class="test1">テスト1. コロンもセミコロンも省略</span><br>
  <span class="test2">テスト 2. コロンだけ省略</span><br>
  <span class="test3">テスト３. セミコロンだけ省略</span><br>
  <span class="test4">テスト4. 何も省略しない</span><br>
→結果. 全部効いた！フレキシブル！<br>
  <span class="bikou">この段落はその書き方で書いています。</span><br>
  <span class="bikou">親要素の参照は「&」。これはLESSもSassも一緒。</span><br>
    </p>
  </section>
</section>

Stylusコード

/*CSS記法*/
#stylus h1 {
  font-size:  40px;
}

#kihou h2 {
  font-size: 30px;
  color: red;
}

#kihou .bikou {
  font-size: 0.8em;
}

#kihou .bikou:before {
  content: "※";
}

/*LESS, SACC記法*/
#less {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
h2 {
  font-size: 30px;
  color: blue;
  }
.bikou {
  font-size: 0.8em;
  &:before {
    content: "※";
  }
}
}

/*Sass記法*/
#sass
    background: #eee
    padding: 10px
    margin: 0 0 10px
    h2 
      font-size: 30px
      color: blue
    .bikou
      font-size: 0.8em
      &:before
        content: "※"

/*Stylusオリジナル*/
#stylus
    background #eee
    padding 10px
    margin 0 0 10px
    h2 
      font-size 30px
      color blue
    .bikou
      font-size 0.8em
      &:before
        content "※"
     .test1
       color red
     .test2
       color red;
     .test3
       color: red
     .test4
       color: red;

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

（2020/04/26追記）

gulpでStylusをコンパイル

※参考：【CSS】StylusをGulpでコンパイルしてみる - クモのようにコツコツと

PostCSS

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

プラグイン

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

nested

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

cssnext

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

HTMLコード

<section id="postcss">
  <h1>PostCSS事始め</h2>
  <p class="lede">CodepenのSettingの旅CSS編の最終回。「次のCSS」とは一体何か？<br>
    PostCSSは新し目のメタ言語で、LESSやSASSと同じようなことができるがコンセプトは少し違うようだ。
</p>
  <ul>
    <li>処理がかなり高速</li>
    <li>必要な機能をプラグインで加えていく</li>
    <li>プラグインは個人が自由に作ることができるため、様々な種類が公開されている。</li>
    <li>cssnextなどのプラグインは将来W3Cが採択する予定の記法を先取りして使用できる。</li>
  </ul>
  <p>プラグインは「@use hogehoge;」という感じで入れるようだ。</p>
  
<section id="nested">
  <h2>nested</h2>
  <p>SASSやLESSのようにネストでかけるプラグイン。&で繋ぐ。</p>
</section>

<section id="cssnext">
  <h2>cssnext</h2>
  <p>W3Cが将来採用する予定の書き方ができる。例えば変数は「:root」で設定して「var(--hoge);」に適用される。<br>
    LESSは@、SASSは$だが将来的には--になりそう。
  </p>
</section>
</section>

PostCSSコード

@use postcss-cssnext;
@use postcss-nested;

:root {
  --h2cl: blue;
}

#postcss h1 {
  font-size: 40px;
  color: red;
}

#nested {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
  & h2 {
    color: blue;
  }
}

#cssnext {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
  & h2 {
  color: var(--h2cl);
  }
}

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

まとめ

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

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

※上にも書きましたがSassやSCSSはNode.jsのgulpでもコンパイルができるようになったみたいです！（2020/04/26追記）

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

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

※参考：【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め - クモのようにコツコツと

※参考：HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com