@block

Stylusでは、任意のコードブロックを変数に割り当て、呼び出したり、引数として渡したり、他の方法で再利用することができます。

ブロックを定義するには、代入記号の後にインデントを増やして記述するか、

foo =
  width: 20px
  height: 20px

foo =
  width: 20px
  height: 20px

@blockキーワードを使った中括弧構文を使用します。

foo = @block {
  width: 20px
  height: 20px
}

foo = @block {
  width: 20px
  height: 20px
}

このブロックをどこかにレンダリングしたい場合は、補間の中でこの変数を呼び出すことができます。

.icon
  {foo}

.icon
  {foo}

は以下のようにレンダリングされます。

.icon {
  width: 20px;
  height: 20px;
}

.icon {
  width: 20px;
  height: 20px;
}

ちなみに、これはブロックミックスインに渡されたブロックを使用する方法と同じです。

現時点では、変数を他の変数と同様に渡して、補間内でレンダリングすることしかできません。将来的には、より多くの処理方法を提供する予定です。

@block #