Pugのいろいろをまとめていく

すぐ忘れるのでメモ。

順次追記していくスタイル。

配列・オブジェクトを改行して書く

このように var を改行・インデントして書くとエラーにならない

-
  var site = {
    title: 'Site Title',
    description: 'Site Description'
  }

属性値に変数を使う

ふつーに変数名を書く。（ダブル）クォーテーション内に書くと変数とみなされないので外に書く。

- var mysize = 10

p(data-size=mysize)

属性値を変数と文字列の連結にする

文字列は（ダブル）クォーテーションでくくり、+ で連結。

- var mysize = 10

p(data-size=mysize + "px")

オブジェクトからナビゲーションを作る

シンプルなナビゲーション

- 
  var navdata = {
    grid: 'Grid',
    container: 'Container',
    nav: 'Nav'
  }

ul
  each val, key in navdata
    li
      a(href="/" + key + "/")= val

ネストあり

//- Data

-
  var nav = [
    {
      slug: '',
      name: 'Basic',
      children: [
        {
          slug: '/basic/foundation/',
          name: 'Foundation'
        },
        {
          slug: '/basic/default-styles/',
          name: 'Default Styles'
        }
      ]
    },
    {
      slug: '',
      name: 'Layout',
      children: [
        {
          slug: '/layout/container/',
          name: 'Container',
        },
        {
          slug: '/layout/grid/',
          name: 'Grid'
        }
      ]
    }
  ]

//- Mixins

mixin nav(items)
  ul#nav__list.nav__list
    each item in items
      +nav-item(item)

mixin nav-item(item)
  li.nav__item
    if item.slug === ''
      span.nav__blank #{item.name}
    else
      a(href=item.slug) #{item.name}

    if item.children !== undefined
      ul.children
        each child in item.children
          +nav-item(child)

//- Output

+nav(nav)

if

最初のハイフンが要らない

if title === ''
  .title '無題'
else if title === 'default'
  .title 'デフォルトのタイトル'
else
  .title title

変数をコンソールに出してデバッグしたい

- var mogu = 'モグ'
- console.log(mogu)