Stylus 中文网

Appearance

Return to top
On this page

变量

¥Variables

我们可以将表达式分配给变量并在整个样式表中使用它们：

¥We may assign expressions to variables and use them throughout our stylesheet:

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;
}

变量甚至可以由表达式列表组成：

¥Variables can even consist of an expression list:

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;
}

标识符（变量名、函数等）还可以包括 $ 字符。例如：

¥Identifiers (variable names, functions, etc.) may also include the $ character. For example:

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

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

我们不能使用 null 来创建空变量，但括号 () 可以做到这一点：

¥We can not use null to create empty variable, but parentheses () can do that:

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

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

编译为：

¥Compiles to:

    body {
      font: sans-serif;
    }

    body {
      font: sans-serif;
    }

属性查询

¥Property Lookup

Stylus 独有的另一个很酷的功能是能够引用定义的属性，而无需将其值分配给变量。一个很好的例子是垂直和水平居中元素所需的逻辑（通常使用百分比和负边距完成，如下所示）：

¥Another cool feature unique to Stylus is the ability to reference properties defined without assigning their values to variables. A great example of this is the logic required for vertically and horizontally center an element (typically done using percentages and negative margins, as follows):

#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：

¥Instead of assigning the variables w and h, we can simply prepend the @ character to the property name to access the value:

#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：

¥Another use-case is conditionally defining properties within mixins based on the existence of others . In the following example, we apply a default z-index of 1—but only if z-index was not previously specified:

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：

¥Property lookup will "bubble up" the stack until found, or return null if the property cannot be resolved. In the following example, @color will resolve to blue:

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

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