Posted at

GruntでJade使う場合にbodyclassをつける方法

More than 5 years have passed since last update.

そもそもbodyclassがどうなのって話はおいといて、何だかんだで便利よね、bodyclass。

でもjadeって「このdiv以下をごにょごにょする」のはblock使えば楽なんだけどbodyみたいなかなり上の方をごにょごにょするのは面倒だなぁな印象があって今までそういうのはできないもんだと思うようにしてた。してたんだけどやっぱりできた、jadeすげー。


変数用のblockを定義

各ページで使用する変数だけを記述するためのblockを用意して、使いたいページのjadeファイルにだけblockを記述すれば良い。超簡単じゃん。

## _layout.jade

//- 各ページ毎に設定する変数ブロック
block vars
-var bodyclass = "default";

doctype html
html
head
meta(charset='UTF-8')

body(class="#{bodyblass}")

## index.jade

block vars
-var bodyclass = "top";

これでカンペキ。Jadeはblockを上手く使うのがポイントだなーと思いました、まる。