Stylus の Mixins でハッシュを使った初期値を設定する方法

Mixins

sample(opts = {})

  // 初期値
  default-opts = {
    width : 100
    height: 50
  }

  // 引数の値を初期値にマージ
  opts = merge(default-opts, opts)

  // ハッシュ内の値を直接取得する場合はプロパティの後に:（コロン）が必要みたい
  // もしくは事前に変数に格納しておく必要がある
  width: (opts.width)px
  height: (opts.height)px

使用方法

まあ、普段から stylus 使ってる人に説明の必要はないかもだけど。一応ね。

// 初期値で使用
.sample-1
  sample()

// 必要な値だけ変更
.sample-2
  sample({ width: 50 })

// 複数の値を変更
.sample-3
  sample({ width: 50, height: 100 })

// 複数の値を変更する場合は改行してみやすくもできる
.sample-4
  sample({
    width : 50
    height: 100
  })

---

ちなみに明記されている箇所は見つけられてないけど、ハッシュの改行時にカンマは不要っぽい感じ。