stylus选择器

只记录我不熟悉以及我不会的。 stylus 中文网站

1. 在css 文件夹 运行以下命令:

stylus -w selector.styl -o selector.css

1. ^[N]选择器

^[N] N是数字，0代表第一个级别,最后一个级别是&

.foo
    &__bar
        &_baz
            width 10px
            ^[-1]:hover &
                width 20px
            ^[2]:hover &
                width 20px

生成变成css文件

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

2. ^[N..M] 选择N到M之前的元素

看以下代码

.foo
    & .bar
        width 100px
        ^[0]:hover ^[1..-1]
          width 200px

转化成css

.foo .bar {
  width: 100px;
}
.foo:hover .bar {
  width: 200px;
}

3. ~/ (Initial Reference) 选择器的开始 相当于 ^[0]

看代码

.block
    &__example
        ~/:hover &
            color red

转成css

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

4. ../ (Relative Reference) 相对选择器

.foo
    .bar
      width 100px
      &,
      ../ .baz
          height 10px

转成 css

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

5. / (Root Reference)

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

转成css

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

6. selector() bif stylus 内置函数 获取当前选择器

看代码

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

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

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

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