stylus预处理器中的选择器selector Partial Reference

安装stylus

yarn add stylus

可以通过执行npx stylus style.styl可以将styl文件转换成同名css文件
npx stylus -w style.styl 添加-w参数可以实时编译
           

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.

局部引用跟父级引用相似，但是父级引用包含了整个选择器，局部引用只包含最初的匹配上的N层嵌套的选择器，因此可以获取到逐层的选择器。

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:

^[0]可以获取到第一层选择器，^[1]可以获取到第二层选择器。

例如：

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px
           

would be rendered as

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

可以看出^[0]获取的是第一层选择器.foo,&获取的是当前父选择器。

下面的例子可以看到N取负数的场景：

.foo
  &.bar
    .l1
        .l2
            ^[0]
                width: 10px;
            ^[1]
                width: 20px;
            ^[2]
                width: 30px;
            ^[-1]
                width: 40px;
           

npx stylus style.styl,编译后：

.foo {
  width: 10px;
}
.foo.bar {
  width: 20px;
}
.foo.bar .l1 {
  width: 30px;
}
.foo.bar .l1 {
  width: 40px;
}
           

正如文档中介绍的，N取负数值时，^[-I]可以获取到父级选择器&前面的第I个选择器。

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

上文中^[-1]位置的&选择器是.foo.bar .li .l2,因此^[-1]，就是.foo.bar .li。

Ranges in partial references

可以用^[N…M]表示需要选择的选择器的范围区间。如果number从正数开始，则选择的选择器不会包括其前面的选择器，而是你指定区间内的选择器。原文

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

N,和M的取值前后没有关系，例如[-1, 1]和[1, -1]的结果是一样的，因为stylus是从前面的选择器开始选取。

如果N和M的值相等，则表示只选择N这一层选择器。下面的例子可以说明：

需要注意的是，这种情况下-1就是指当前层的父选择器。而不是父选择器的前一层，这一点与^[-1]有很大区别。

.foo
  &.bar
    .l1
        .l2
            ^[1..-2]
                width: 10px;
                ^[0..2]
                    height: 20px;
            ^[1]
                width: 30px;
            ^[1..1]
                width: 40px;

.l3
    .l4
        &
            ^[-1..-1]
                width: 50px;

.l5
    .l6
        &.l7
            ^[1..-1]
                width: 60px;
           

编译后

.bar .l1 {
  width: 10px;
}
.foo.bar .l1 {
  height: 20px;
}
.foo.bar {
  width: 30px;
}
.bar {
  width: 40px;
}
.l6.l7 {
  width: 60px;
}
           

^[1…-2]中，1选择的是第2个选择器，和倒数第2个选择器之间的选择器，注意第2个选择器中包含一个&父选择器，这时候是取不到父选择器的。

本例子中^[-1…-1]则没有选择到选择器。

而^[1…-1]则选择的是.l6.l7选择器。

~/ 表示最初的选择符，Initial Reference。可以当作^[0]的简写。

…/相对选择符

/表示根选择符，即不嵌套在任何选择符下

内建函数built-in-function selector()可以返回当前编译的选择符,一般用在maxin中

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

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

selector()还可以接受参数，这种情况下，该函数不会预先准备作用域，即不会默认提供&符作用域。

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

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

再看一组例子：

.l8
    selector()
        height: 20px;
           

上面这样设置虽然不会编译出错，但是没有任何意义，不会编译出对应的选择符。但是可以在selector()加上{}就可以。

.l8
    {selector()}
        height: 20px;
=> 
.l8 .l8 {
  height: 20px;
}
           

同理，

.l8
    {selector('.l9')}
        height: 20px;
=> 
.l8 .l9 {
  height: 20px;
}
           

当然，也可以给selector()传入多个参数。

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

selectors() 内建函数返回当前层的逗号分割的选择器列表。

.a
  .b
    .c
        &__d
            content: selectors()
=> 
.a .b .c__d {
  content: '.a', '& .b', '& .c', '&__d';
}