是否有可能將嵌套SASS選擇器遍歷到父選擇器？

Question

只是一個關於SASS選擇器嵌套的問題，所以我在一個嵌套的範圍內，我想應用:hover僞所以不透明度更改爲0，我也想使用這種風格，雖然當父標籤獲得類is-active。現在我會將is-active類移到範圍之外並重新應用樣式，但是我想知道是否可以像遍歷一樣在嵌套樣式中向上移動一個水平？

我的例子SASS：

.btn-lang { 
    // styles... 

    > span { 
     // styles... 

     &:hover { // i want to use this when btn-lang has class is-active 
      opacity: 0; 
     } 
    } 

    // right now I would add these styles here but seems there could be an easier method? 
    &.is-active { 
     > span { 
      &:hover { 
       opacity: 0; 
      } 
     } 
    } 
} 

Answer 1

你想在一個單一的建築再利用兩個選擇（.btn-lang和span）。這對於SASS來說是不可能的。

這種情況是延伸大放異彩：

// Declaring a reusable extend that will not appear in CSS by itself. 
%span-with-hover-on-active-element { 
    & > span { 
     /* styles for span under btn-lang */ } 
    &.is-active > span:hover { 
     opacity: 0; } } 

.btn-lang { 
    /* styles for btn-lang */ 
    // Apply the span-on-hover thing. 
    @extend %span-with-hover-on-active-element; } 

它使複雜的代碼reuable，更易於閱讀。

得到的CSS：

.btn-lang > span { 
    /* styles for span under btn-lang */ 
} 
.is-active.btn-lang > span:hover { 
    opacity: 0; 
} 

.btn-lang { 
    /* styles for btn-lang */ 
}