Skip to content

块(@block)

您可以将Stylus中的任何代码块赋值给变量,然后调用它,作为参数传递或以任何其他方式重用。

To define a block, either write it down with an increased indent after an assign sign:

foo =
  width: 20px
  height: 20px
foo =
  width: 20px
  height: 20px

or use a curly braces syntax with @block keyword:

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

if you would like to render this block anywhere, you could call this variable inside an interpolation, so

.icon
  {foo}
.icon
  {foo}

would render to

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

BTW, this is the same way you can use the blocks passed to the block mixins.

Right now you can only pass the variable as any other variable and render it inside an interpolation. In future we would provide more ways of handling it.