在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-parse功能selector-replace功能与.foo.bar更换.foo在充分家长选择。

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