変数

式を変数に代入し、スタイルシート全体でその変数を使用できます。

font-size = 14px

body
  font font-size Arial, sans-serif

//Compiles to:
body {
  font: 14px Arial, sans-serif;
}

font-size = 14px

body
  font font-size Arial, sans-serif

//Compiles to:
body {
  font: 14px Arial, sans-serif;
}

変数は式のリストで構成することもできます。

font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif

body
  font font-size font-stack

//Compiles to:
body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif

body
  font font-size font-stack

//Compiles to:
body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

識別子（変数名、関数など）には、`$`文字を含めることもできます。例：

$font-size = 14px
body {
  font: $font-size sans-serif;
}

$font-size = 14px
body {
  font: $font-size sans-serif;
}

nullを使用して空の変数を作成することはできませんが、括弧`()`を使用すれば作成できます。

empty = ()
body {
  font: empty sans-serif;
}

empty = ()
body {
  font: empty sans-serif;
}

コンパイル結果：

    body {
      font: sans-serif;
    }

    body {
      font: sans-serif;
    }

プロパティ参照

Stylus独自のもう1つの優れた機能は、値を変数に代入*せずに*定義されたプロパティを参照できることです。この好例は、要素を垂直方向と水平方向に中央揃えするために必要なロジックです（通常、パーセンテージと負のマージンを使用して次のように行われます）。

#logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)

#logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)

変数 `w` と `h` を代入する代わりに、プロパティ名の前に `@` 文字を追加するだけで値にアクセスできます。

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

別のユースケースは、他のプロパティが存在するかどうか基づいて、mixin内でプロパティを条件付きで定義することです。次の例では、デフォルトの `z-index`として `1` を適用しますが、`z-index` が以前に指定されていない場合*のみ*です。

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

プロパティ参照は、プロパティが見つかるまでスタックを「バブルアップ」し、プロパティを解決できない場合は `null` を返します。次の例では、`@color` は `blue` に解決されます。

body
  color: red
  ul
    li
      color: blue
      a
        background-color: @color

body
  color: red
  ul
    li
      color: blue
      a
        background-color: @color

変数 #

プロパティ参照 #

変数

プロパティ参照