Stylusの書き方まとめ 変数編

[feature cat=”howto-stylus”]

Lookup

同じブロック内の値を参照できる。

.foo
  width w = 100px
  height h = 48px
  margin (w / 2)
  padding (h / 2)

//

.foo {
  width: 100px;
  height: 48px;
  margin: 50px;
  padding: 24px;
}

.foo
  width 100px
  height 48px
  margin (@width / 2)
  padding (@height / 2)

//

.foo {
  width: 100px;
  height: 48px;
  margin: 50px;
  padding: 24px;
}

あるプロパティが指定されていなければ出力

box()
  // backgroundが指定されていなければ
  background white unless @background
  border 1px solid #ccc

.box
  box()

  &--first
    background navy
    box()

//

.box {
  background: #fff;
  border: 1px solid #ccc;
}
.box--first {
  background: #000080;
  border: 1px solid #ccc;
}