Sass/Scss：改變嵌套psuedo選擇器的順序：before和：hover in generated CSS？

Question

鑑於以下薩斯：

div.test { 
    display: inline-block; 
    background-color: #ffffff; 
    color: #000000; 
    &:before { 
     & { 
      &:hover { 
       border: 1px solid salmon; 
      } 
     } 
     width: 25px; 
     height: 25px; 
     content: ""; 
    } 
} 

產生的CSS編譯爲：

div.test { 
    display: inline-block; 
    background-color: #ffffff; 
    color: #000000; 
} 

    div.test:before { 
     width: 25px; 
     height: 25px; 
     content: ""; 
    } 

     div.test:before:hover { 
      border: 1px solid salmon; 
     } 

什麼，我試圖做的是產生div.test：懸停：前（電流輸出是之前：hover）。

注：我能夠通過以下薩斯產生預期CSS：

div.test { 
    display: inline-block; 
    background-color: #ffffff; 
    color: #000000; 
    &:hover { 
     &:before { 
      border: 1px solid salmon; 
     } 
    } 

    &:before { 
     width: 25px; 
     height: 25px; 
     content: ""; 
    } 
} 

不過，我想知道是否可以使用第一嵌套方式或者它的一些修改。

目標是避免重複&：之前是否有這樣的方法來使用Sass語法。我也知道這是不可能的。

Answer 1

雖然initially the plan was to have '&' available in SassScript作爲一個字符串，可以被操縱，以便你可以插入任何你想要的值，those plans have been abandoned for 3.3 due to complication。不幸的是，你必須等待一段時間才能做到這一點。目前'&'是不可變的，只是意味着「到目前爲止，無論選擇器鏈是什麼」。