在嵌套的Sass樹中引用額外類的頂級選擇器

Question

多年來我一直在使用css crush，最近才發現scss。在那裏，根據頂層父元素的附加類，可以將特定屬性添加到任何嵌套元素。

<div class="someDivClass"> 
    <ul class="someULclass"> 
     <li>Text lorem ipsum</li> 
     <li>Text ipsum lorem 
      <ul class="someULclass2"> 
       <li>Text lorem ipsum</li> 
       <li>Text ipsum lorem</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

的CSS將走這樣的事情....

.someDivClass { 
    ul.someClass { 
     fewUlporpertis: values; 
     li { 
      fewLIporpertis: values; 
      ul.someULclass2 { 
       fewUlporpertis: values; 
       li { 
        fewLIporpertis: values; 
       } 
      } 
     } 
    } 
} 

現在，如果我有...

<div class="someDivClass additionalClass"> 
    ..... 
</div> 

我能做到這一點...

.someDivClass { 
    ul.someClass { 
     fewUlporpertis: values; 
     li { 
      fewLIporpertis: values; 
      ul.someULclass2 { 
       fewUlporpertis: values; 
       li { 
        fewLIporpertis: values; 
        .additionalClass& { 
         color: red; 
        } 
       } 
      } 
     } 
    } 
} 

這會給我這個輸出...

.additionalClass.someDivClass ul.someClass li ul.someULclass2 li {color: red;} 

有沒有辦法在SASS中做同樣的事情？對不起，如果這是記錄，所有我能找到的是引用直接父母，而不是一個頂級的。

或者超簡化的問題....

爲什麼這不工作..

.topParent& {color: red;} 

..？

Answer 1

，避免定位於直接父，你應該使用@at-root指令（在薩斯3.3引入的）穿越迴文檔根：

.someDivClass { 
    ul.someULclass { 
     li { 
      ul.someULclass2 { 
       li { 
        @at-root .additionalClass#{&} { 
         color: red; 
        } 
       } 
      } 
     } 
    } 
} 

這將輸出到：

.additionalClass.someDivClass ul.someULclass li ul.someULclass2 li { color: red; } 

See Demo