選擇器中較少的變量與＆

我想使用&附加一個僞：不是父類，但我不知道如何使用mixin和變量選擇器時如何做到這一點。選擇器中較少的變量與＆

.hideElement(@selector, @maxWidth) { 
    @media (max-width: @maxWidth) { 
    @{selector} { 
     display: none; 
    } 
    } 
} 

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) { 
    .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px); 
}

我想輸出是：

.jp-sleek.jp-audio:not(.jp-state-no-volume-support):not(.jp-state-full-screen) .jp-title-container { 
    display: none; 
}

的電流輸出（請注意在空間：不）：

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) :not(.jp-state-full-screen) .jp-title-container { 
    display: none; 
}

我知道我需要使用&選擇但這不起作用：

.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);

我該怎麼做？用於上下文

全碼：

.jp-sleek.jp-video, 
.jp-sleek.jp-audio.jp-state-no-volume-support { 
    .hideElement(~'.jp-repeat', 400px); 
    .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 530px); 
    .hideElement(~'.jp-download', 580px); 
} 

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) { 
    .hideElement(~'.jp-full-screen', 400px); 
    .hideElement(~'.jp-repeat', 450px); 
    .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px); 
    .hideElement(~'.jp-download', 630px); 
}

來源

2017-02-16 Martin Dawson

不，沒有特殊的運算符（如'＆'或逗號）在插值中有其特殊含義。你可以通過mixin的附加參數使選擇器有條件地固定，但在這種特殊情況下，我建議你將整個事物倒置（通過將mixin放入感興趣的規則集中） - [就像這樣]（https://gist.github.com/seven-phases-max/9063dba4225b488d36760c1e13aa62f1）。 –

的&不能被用作一個參數，以一個或混入作爲參數傳遞給一個混合的一部分。當以這種方式使用&時沒有特別的意義。它不會解析到父級選擇器，並將保持爲&。加上下面的行是不正確的，因爲~後面必須跟着"。

.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);

我強烈敦促你看看由seven-phases-max in his comment建議的替代方法。但是，在保留代碼基礎的同時，您的問題的一個非常簡單的解決方案將是以下內容。只需將&:not(...)部分取出，將其作爲自己的塊，然後在此塊中調用.hideElement mixin，並將選擇器的其他部分（子選擇器）作爲輸入。

.jp-sleek.jp-video, 
.jp-sleek.jp-audio.jp-state-no-volume-support { 
    .hideElement(~'.jp-repeat', 400px); 
    &:not(.jp-state-full-screen){ /* take the not part out and put it as a block */ 
    .hideElement(~'.jp-title-container', 530px); 
    } 
    .hideElement(~'.jp-download', 580px); 
} 

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) { 
    .hideElement(~'.jp-full-screen', 400px); 
    .hideElement(~'.jp-repeat', 450px); 
    &:not(.jp-state-full-screen) { /* take the not part out and put it as a block */ 
    .hideElement(~'.jp-title-container', 580px); 
    } 
    .hideElement(~'.jp-download', 630px); 
}

來源

2017-02-17 10:19:49 Harry

選擇器中較少的變量與＆

回答

相關問題