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