引用父選擇器，以及：沒有

Question

的製品here示出使用符號引用一個父選擇器，像這樣的光輝例如：

h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 

    .some-parent-selector & { 
    font-size: 24px; 
    margin-bottom: 20px; 
    } 
} 

這按預期工作。但是，我遵循BEM原則，不希望重寫Sass。正如您在下面的屏幕截圖中看到的，.js-tabby中的樣式將覆蓋默認的.tabs代碼。

我已經試過了諸如：

.tabs { 
    display: none; 
    visibility: hidden; 

    .js-tabby &:not(&) { 
    display: none; 
    visibility: hidden; 
    } 

    .js-tabby & { 
    display: block; 
    visibility: visible; 
    } 
} 

但很可惜，這是行不通的。

Answer 1

當我寫這個問題時，我有一種看起來很瘋狂的想法，但它工作！所以，這裏是我的第一Q- &一個不斷：

.tabs {  
    html:not(.js-tabby) & { 
    display: none; 
    visibility: hidden; 
    } 

    html.js-tabby & { 
    display: block; 
    visibility: visible; 
    } 
} 

插件我使用加印.js-tabby類的html元素，所以我針對性的和BOOM！有用。

這已經困擾了我很長一段時間，我希望我能拯救別人進一步的挫敗感。