选择器

¥Selectors

缩进

¥Indentation

Stylus 是 "pythonic"（即基于缩进）。空格很重要，因此我们用缩进和取消缩进替换 { 和 }，如下所示：

¥Stylus is "pythonic" (i.e. indentation-based). Whitespace is significant, so we substitute { and } with an indent, and an outdent as shown below:

body
  color white

body
  color white

编译为：

¥Which compiles to:

body {
  color: #fff;
}

body {
  color: #fff;
}

如果愿意，你可以使用冒号来分隔属性和值：

¥If preferred, you can use colons to separate properties and values:

body
  color: white

body
  color: white

规则集

¥Rule Sets

Stylus 与 CSS 一样，允许你通过逗号分隔同时定义多个选择器的属性。

¥Stylus, just like CSS, allows you to define properties for several selectors at once through comma separation.

textarea, input
  border 1px solid #eee

textarea, input
  border 1px solid #eee

可以使用换行符完成同样的操作：

¥The same can be done with a newline:

textarea
input
  border 1px solid #eee

textarea
input
  border 1px solid #eee

两者都编译为：

¥Both compile to:

textarea,
input {
  border: 1px solid #eee;
}

textarea,
input {
  border: 1px solid #eee;
}

此规则的唯一例外是看起来像属性的选择器。例如，以下 foo bar baz 可能是属性或选择器：

¥The only exception to this rule are selectors that look like properties. For example, the following foo bar baz might be a property or a selector:

foo bar baz
> input
  border 1px solid

foo bar baz
> input
  border 1px solid

因此，出于这个原因（或者如果愿意的话），我们可以在后面加上逗号：

¥So for this reason (or simply if preferred), we may trail with a comma:

foo bar baz,
form input,
> a
  border 1px solid

foo bar baz,
form input,
> a
  border 1px solid

父引用

¥Parent Reference

& 字符引用父选择器。在下面的示例中，我们的两个选择器（textarea 和 input）都更改了 :hover 伪选择器上的 color。

¥The & character references the parent selector(s). In the example below our two selectors (textarea and input) both alter the color on the :hover pseudo selector.

textarea
input
  color #A7A7A7
  &:hover
    color #000

textarea
input
  color #A7A7A7
  &:hover
    color #000

编译为：

¥Compiles to:

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

下面是一个使用 mixin 中的父引用为 Internet Explorer 提供简单 2px 边框的示例：

¥Below is an example providing a simple 2px border for Internet Explorer utilizing the parent reference within a mixin:

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &,
  html.ie7 &,
  html.ie6 &
    border 2px solid arguments[length(arguments) - 1]

body
  #login
    box-shadow 1px 1px 3px #eee

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &,
  html.ie7 &,
  html.ie6 &
    border 2px solid arguments[length(arguments) - 1]

body
  #login
    box-shadow 1px 1px 3px #eee

产量：

¥Yielding:

body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee;
}

body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee;
}

如果你需要在选择器中使用＆符号而不使其表现得像父引用，则可以将其转义：

¥If you'd need to use the ampersand symbol in a selector without it behaving like a parent reference, you can just escape it:

.foo[title*='\&']
// => .foo[title*='&']

.foo[title*='\&']
// => .foo[title*='&']

局部引用

¥Partial Reference

选择器中任意位置的 ^[N]（其中 N 可以是数字）表示部分引用。

¥^[N] anywhere in a selector, where N can be a number, represents a partial reference.

部分引用的工作方式与父引用类似，但父引用包含整个选择器，而部分选择器仅包含嵌套选择器的第一个合并的 N 级别，因此你可以单独访问这些嵌套级别。

¥Partial reference works similar to the parent reference, but while parent reference contains the whole selector, partial selectors contain only the first merged N levels of the nested selectors, so you could access those nesting levels individually.

^[0] 将为你提供第一级的选择器，^[1] 将为你提供第二级的渲染选择器，依此类推：

¥The ^[0] would give you the selector from the first level, the ^[1] would give you the rendered selector from the second level and so on:

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

将被渲染为

¥would be rendered as

.foo__bar {
  width: 10px;
}
.foo:hover .foo__bar {
  width: 20px;
}

.foo__bar {
  width: 10px;
}
.foo:hover .foo__bar {
  width: 20px;
}

负值从末尾开始计数，因此 ^[-1] 将为你提供 & 之前链中的最后一个选择器：

¥Negative values are counting from the end, so ^[-1] would give you the last selector from the chain before &:

.foo
  &__bar
    &_baz
      width: 10px

      ^[-1]:hover &
        width: 20px

.foo
  &__bar
    &_baz
      width: 10px

      ^[-1]:hover &
        width: 20px

将被渲染为

¥would be rendered as

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}

当你不知道在什么嵌套级别调用它时，负值对于在 mixin 中使用特别有用。

¥Negative values are especially helpful for usage inside mixins when you don't know at what nesting level you're calling it.

请注意，部分引用包含整个渲染的选择器链，直到给定的嵌套级别，而不是选择器的“部分”。

¥Note that partial reference contain the whole rendered chain of selectors until the given nesting level, not the “part” of the selector.

部分引用中的范围

¥Ranges in partial references

选择器中任意位置的 ^[N..M]（其中 N 和 M 都可以是数字）表示部分引用。

¥^[N..M] anywhere in a selector, where both N and M can be numbers, represents a partial reference.

如果你需要获取选择器的原始部分，或者以编程方式获取部分范围，则可以在部分引用内使用范围。

¥If you'd have a case when you'd need to get the raw part of the selector, or to get the range of parts programmatically, you could use ranges inside partial reference.

如果范围从正值开始，则结果将不包含先前级别的选择器，并且你将获得结果，就好像这些级别的选择器插入到样式表的根部并省略组合器一样：

¥If the range would start from the positive value, the result won't contain the selectors of the previous levels and you'd get the result as if the selectors of those levels were inserted at the root of the stylesheet with the combinators omitted:

.foo
  & .bar
    width: 10px

    ^[0]:hover ^[1..-1]
      width: 20px

.foo
  & .bar
    width: 10px

    ^[0]:hover ^[1..-1]
      width: 20px

将被渲染为

¥would be rendered as

.foo .bar {
  width: 10px;
}
.foo:hover .bar {
  width: 20px;
}

.foo .bar {
  width: 10px;
}
.foo:hover .bar {
  width: 20px;
}

该范围中的一个数字是起始索引，第二个数字是结束索引。请注意，这些数字的顺序并不重要，因为选择器始终从第一个级别渲染到最后一个级别，因此 ^[1..-1] 将等于 ^[-1..1]。

¥One number in the range would be the start index, the second — the end index. Note that the order of those numbers won't matter as the selectors would always render from the first levels to the last, so ^[1..-1] would be equal to the ^[-1..1].

当两个数字相等时，结果将只是选择器的一个原始级别，因此你可以将上一个示例中的 ^[1..-1] 替换为 ^[-1..-1]，并且它将等于相同的最后一个原始选择器，但如果使用会更可靠在 mixins 里面。

¥When both numbers are equal, the result would be just one raw level of a selector, so you could replace ^[1..-1] in a previous example to ^[-1..-1], and it would be equal to the same last one raw selector, but would be more reliable if used inside mixins.

初始引用

¥Initial Reference

选择器开头的 ~/ 字符可用于指向第一个嵌套的选择器，并且可以被视为 ^[0] 的快捷方式。唯一的缺点是你只能在选择器的开头使用初始引用：

¥The ~/ characters at the start of a selector can be used to point at the selector at the first nesting and could be considered as a shortcut to ^[0]. The only drawback is that you can use initial reference only at the start of a selector:

.block
  &__element
    ~/:hover &
      color: red

.block
  &__element
    ~/:hover &
      color: red

将被渲染为

¥Would be rendered as

.block:hover .block__element {
  color: #f00;
}

.block:hover .block__element {
  color: #f00;
}

相对引用

¥Relative Reference

选择器开头的 ../ 字符标记相对引用，它指向 & 编译选择器的前一个。你可以嵌套相对引用：../../ 以获得更深的级别，但请注意它只能在选择器的开头使用。

¥The ../ characters at the start of a selector mark a relative reference, which points to the previous to the & compiled selector. You can nest relative reference: ../../ to get deeper levels, but note that it can be used only at the start of the selector.

.foo
  .bar
    width: 10px

    &,
    ../ .baz
      height: 10px

.foo
  .bar
    width: 10px

    &,
    ../ .baz
      height: 10px

将被渲染为

¥would be rendered as

.foo .bar {
  width: 10px;
}
.foo .bar,
.foo .baz {
  height: 10px;
}

.foo .bar {
  width: 10px;
}
.foo .bar,
.foo .baz {
  height: 10px;
}

相对引用可以被认为是部分引用的快捷方式，其范围如 ^[0..-(N + 1)]，其中 N 是使用的相对引用的数量。

¥Relative references can be considered as shortcuts to the partial references with ranges like ^[0..-(N + 1)] where the N is the number of relative references used.

根引用

¥Root Reference

选择器开头的 / 字符是根引用。它引用根上下文，这意味着选择器不会将父级的选择器添加到它前面（除非你将其与 & 一起使用）。当你需要向某个嵌套选择器和另一个嵌套选择器（不在当前范围内）编写一些样式时，这会很有帮助。

¥The / character at the start of a selector is a root reference. It references the root context and this means the selector won't prepend the parent's selector to it (unless you would use it with &). It is helpful when you need to write some styles both to some nested selector and to another one, not in the current scope.

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color #000

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color #000

编译为：

¥Compiles to:

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
  color: #000;
}

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
  color: #000;
}

selector() bif

你可以使用内置的 selector() 来获取当前编译的选择器。可以在 mixin 中使用来进行检查或其他聪明的事情。

¥You can use the built-in selector() to get the current compiled selector. Could be used inside mixins for checks or other clever things.

.foo
  selector()
  // => '.foo'

.foo
  &:hover
    selector()
  // '.foo:hover'

.foo
  selector()
  // => '.foo'

.foo
  &:hover
    selector()
  // '.foo:hover'

这个 bif 还可以接受一个可选的字符串参数，在这种情况下它将返回编译后的选择器。请注意，如果当前作用域没有任何 & 符号，则不会在其前面添加选择器。

¥This bif could also accept an optional string argument, in this case it would return the compiled selector. Note that it wouldn't prepend the selector of the current scope in case it don't have any & symbols.

.foo
  selector('.bar')
// => '.bar'

.foo
  selector('&:hover')
// '.foo:hover'

.foo
  selector('.bar')
// => '.bar'

.foo
  selector('&:hover')
// '.foo:hover'

`selector()` bif 的多个值

¥Multiple values for selector() bif

selector() bif 可以接受多个值或逗号分隔的列表，以便更轻松地创建嵌套选择器结构。

¥selector() bif can accept multiple values or a comma-separated list in order to create a nested selector structure easier.

{selector('.a', '.b', '.c, .d')}
  color: red

{selector('.a', '.b', '.c, .d')}
  color: red

将等于

¥would be equal to the

.a
  .b
    .c,
    .d
      color: red

.a
  .b
    .c,
    .d
      color: red

并将被渲染为

¥and would be rendered as

.a .b .c,
.a .b .d {
  color: #f00;
}

.a .b .c,
.a .b .d {
  color: #f00;
}

selectors() bif

此 bif 返回当前级别的嵌套选择器的逗号分隔列表：

¥This bif returns a comma-separated list of nested selectors for the current level:

.a
  .b
    &__c
      content: selectors()

.a
  .b
    &__c
      content: selectors()

将被渲染为

¥would be rendered as

.a .b__c {
  content: '.a', '& .b', '&__c';
}

.a .b__c {
  content: '.a', '& .b', '&__c';
}

消歧义

¥Disambiguation

诸如 margin - n 之类的表达式既可以解释为减法运算，也可以解释为带有一元减号的属性。要消除歧义，请用括号将表达式括起来：

¥Expressions such as margin - n could be interpreted both as a subtraction operation, as well as a property with an unary minus. To disambiguate, wrap the expression with parens:

pad(n)
  margin (- n)

body
  pad(5px)

pad(n)
  margin (- n)

body
  pad(5px)

编译为：

¥Compiles to:

body {
  margin: -5px;
}

body {
  margin: -5px;
}

然而，这只适用于函数（因为函数既充当混合函数，又充当带返回值的调用）。

¥However, this is only true in functions (since functions act both as mixins, or calls with return values).

例如，以下内容就可以（并且产生与上面相同的结果）：

¥For example, the following is fine (and yields the same results as above):

body
  margin -5px

body
  margin -5px

有 Stylus 无法处理的奇怪属性值吗？unquote() 可以帮助你：

¥Have weird property values that Stylus can't process? unquote() can help you out:

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

产量：

¥Yields:

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

选择器 #

缩进 #

规则集 #

父引用 #

局部引用 #

部分引用中的范围 #

初始引用 #

相对引用 #

根引用 #

selector() bif #

selector() bif 的多个值 #

selectors() bif #

消歧义 #

选择器

缩进

规则集

父引用

局部引用

部分引用中的范围

初始引用

相对引用

根引用

selector() bif

`selector()` bif 的多个值

selectors() bif

消歧义