Skip to content

@block

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

¥You can assign any block of code in Stylus to a variable and then call it, pass as an argument or reuse in any other way.

要定义块,请在分配符号后增加缩进:

¥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

或使用带 @block 关键字的大括号语法:

¥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.