Менее переменные в селекторе с &

Question

Я хочу использовать & для присоединения псевдо: не к родительскому классу, но я не знаю, как это сделать при использовании миксинов и селекторов переменных.

.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); 
} 

Answer 1

& не может быть использован в качестве параметра к Mixin или в качестве части параметра к Mixin. При использовании таким образом & не имеет особого значения. Он не будет разрешать родительский селектор и останется как &. Плюс нижняя строка неверна, потому что ~ должен сопровождаться ".

.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); 
}