在 SASS 中展开之前的路径答案

【问题标题】：Expand previous path in SASS在 SASS 中展开之前的路径
【发布时间】：2016-11-21 12:16:15
【问题描述】：

我现在对 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 一起存储，但它并没有像我想要的那样工作。提前致谢

【问题讨论】：

你试过&.bar some-stuff .class作为&.foo中的嵌套选择器吗？
这会成功，但我必须再次使用所有底层选择器重新键入所有内容。我想尽可能干。更新了问题以使其更清楚。
像魅力一样工作！谢谢分配！
我不小心删除了我在 cmets 中发布的要点。由于代码无论如何都在答案中，因此我将其保留原样并删除了我的评论。请不要介意。

标签： css sass

【解决方案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;
}

【讨论】：