More than 5 years have passed since last update.

Jade, Slimを使うなら、Sass記法かStylusを使ったほうがいいと思う

Posted at 2015-06-03

JadeやSlimはインデントで記述するHTML Preprocessorです。

Jadeの記述

#demo
  h1 title
  p lorem
  ul.list
    li
      | demo
      br
      | demo
    li demo2

このJadeをテキストの部分だけとってやります。

#demo
  h1
  p
  ul.list
    li
    li

そうすると何かに見えてくるはずです。
そうですね。同じインデント記法で扱えるSassやStylusのセレクタです。
このテキストを抜いたJade(Slim)を貼り付けるだけで、そのままSassなどを書き始めることができます。

Sassに貼り付けて、宣言を書き足した

#demo
  width: 32em
  margin: 0 auto
  h1
    font-size: 2em
  p
    line-height: 1.5
  ul.list
    color: #aaa
    li
      margin: 1em 0

SCSSを使うより、楽ですね。

Qiitaに登録したけど、何も書くことがなかったので、当たり前のことを書いてみました。