css - 在SASS中展开之前的路径

Question

我现在对 Sass 中的路径/选择器有一个小问题。 我得到了这样的东西:

&.foo {
  some-stuff .class,
  some-stuff ul,
  other-stuff .all {
    color: red;
  }
}

现在，当第一个路径是 &.foo.bar 时，我想将颜色设为蓝色:

&.foo {
  some-stuff .class,
  some-stuff ul,
  other-stuff .all {
    color: red;
    // This obviously doesn't work, it's just here to show
    // what I want to do easier
    &.bar {
      color: blue;
    }
  }
}

// Compile to

.foo some-stuff .class,
.foo some-stuff ul,
.foo other-stuff .all {
  color: red;
}

.foo.bar some-stuff .class,
.foo.bar some-stuff ul,
.foo.bar other-stuff .all {
  color: blue;
}

有什么办法可以实现这一点吗？

我尝试使用变量来存储当前选择器 selector-parse Function但结果并没有像我想要的那样。提前致谢

Answer 1

您可以使用selector-replace函数而不是 selector-parse函数将完整父选择器中的 .foo 替换为 .foo.bar。

div{
  &.foo {
    some-stuff .class,
    some-stuff ul,
    other-stuff .all {
      color: red;
      @at-root #{selector-replace(&, '.foo', '.foo.bar')} {
        color: blue;
      }
    }
  }
}

编译后，会生成以下 CSS:

div.foo some-stuff .class,
div.foo some-stuff ul,
div.foo other-stuff .all {
  color: red;
}
div.foo.bar some-stuff .class, 
div.foo.bar some-stuff ul, 
div.foo.bar other-stuff .all {
  color: blue;
}