跳到主要内容

选择器

缩进​

Stylus 是“Pythonic”的（即基于缩进）。空格是有意义的，因此我们用缩进代替 { 和 }，用 缩进 和 减少缩进 如下所示：

body
  color white

编译为：

body {
  color: #fff;
}

如果喜欢，也可以使用冒号分隔属性和值：

body
  color: white

规则集​

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

textarea, input
  border 1px solid #eee

也可以使用换行符：

textarea
input
  border 1px solid #eee

两者都编译为：

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

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

foo bar baz
> input
  border 1px solid

因此，出于这个原因（或者只是喜欢这样做），我们可以在末尾加上逗号：

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

父级引用​

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

textarea
input
  color #A7A7A7
  &:hover
    color #000

编译为：

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

以下是在 mixin 中利用父级引用为 Internet Explorer 提供简单的 2px 边框的示例：

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

产生：

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

如果您需要在选择器中使用 ampersand 符号而不像父级引用一样运作，您可以使用转义符号进行转义：

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

部分引用​

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

部分引用与父级引用类似，但是父级引用是引用整个父选择器，而部分引用只引用选择器的前 N 个部分。

例如，以下选择器：

body ^[2]
  color: white

将编译为：

body body {
  color: white;
}

nce 包含整个选择器，而部分选择器仅包含嵌套选择器的前 N 级，因此您可以单独访问这些嵌套级别。

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

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

将被渲染为

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

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

.foo
  &__bar
    &_baz
      width: 10px

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

将被渲染为

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

负值在 mixin 中使用时特别有用，因为您不知道在哪个嵌套级别调用它。

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

部分引用中的范围​

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

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

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

.foo
  & .bar
    width: 10px

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

将被渲染为

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

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

当两个数字相等时，结果将仅为选择器的一个原始级别，因此您可以将前面示例中的 ^[1..-1] 替换为 ^[-1..-1]，它将等于相同的最后一个原始选择器，但在 mixin 中使用时更可靠。

初始引用​

选择器开头的 ~/ 字符可用于指向第一级别的选择器，可以视为```

^ [0] 是一个快捷方式。唯一的缺点是你只能在选择器的开头使用初始引用：

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

将被渲染为

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

相对引用​

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

.foo
  .bar
    width: 10px

    &,
    ../ .baz
      height: 10px

将被渲染为

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

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

根引用​

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

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

编译为：

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

selector() 内置函数​

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

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

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

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

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

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

selector() 函数的多个值​

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

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

等同于

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

并将被渲染为

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

selectors() 内置函数​

这个函数返回一个逗号分隔的嵌套选择器列表，用于当前选择器的所有父级。

.foo
  .bar
    selectors()

将被渲染为

.foo .bar,
.foo {
}

当前级别：

.a
  .b
    &__c
      content: selectors()

将被渲染为：

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

歧义消除​

诸如 margin - n 的表达式既可以解释为减法操作，也可以解释为带有一元负号的属性。为了消除歧义，用括号括起表达式：

pad(n)
  margin (- n)

body
  pad(5px)

编译为：

body {
  margin: -5px;
}

然而，这仅适用于函数（因为函数既可以作为混合器，也可以作为带有返回值的调用）。

例如，以下代码是正确的（并且产生与上面相同的结果）：

body
  margin -5px

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

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

产生：

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