Состояние зависания триггера в mixin

Question

У меня есть меньше миксин с состоянием по умолчанию и состоянием зависания. Теперь мне нужно активировать состояние зависания в mixin, когда я паря над родительским элементом.

Менее

#icons() { 
    .settingsIcon() { 
    background: url("settings.png"); 
    &:hover { 
     background: url("settings_hover.png"); 
    } 
    } 
} 

.SettingsButton { 
    height: 50px; 
    width: 200px; 
    .icon { 
     #icons > .settingsIcon(); 
    } 
} 

HTML:

<div class="SettingsButton" > 
    <span>Settings</span> 
    <div class="icon"></div> 
</div> 

мне нужно, чтобы убедиться, что тот же эффект, что происходит на settingsIcon парении срабатывает на кнопку зависании также. Так что я думаю, что мне нужно сделать что-то вроде этого, где я называю hoversettingsIcon. Что-то вроде этого (недействительно Меньше кода)

.SettingsButton:hover { 
    .icon { 
    #icons > .settingsIcon():hover; 
    } 
} 

Как бы это сделать?

Answer 1

Возможно, было бы лучше переписать свои миксины, как в приведенном ниже примере. По сути, мы разбиваем базовый параметр и устанавливаем hover на два разных микшина в одном и том же пространстве имен(), а затем вызываем их по мере необходимости.

#icons() { 
    .settingsIcon() { 
    background: url("settings.png"); 
    } 
    .settingsIconHover(){  
    background: url("settings_hover.png"); 
    } 
} 

.SettingsButton { 
    height: 50px; 
    width: 200px; 
    .icon { 
    #icons > .settingsIcon(); 
    &:hover{ 
     #icons > .settingsIconHover(); 
    } 
    } 
    &:hover .icon{ 
    #icons > .settingsIconHover(); 
    } 
} 

---

Другой способ достичь этого, поддерживая при этом только одна запись в #icons для всех состояний, чтобы переместить селектор .icon также находиться в пределах Mixin, как в приведенном ниже фрагменте кода.

#icons() { 
    .settingsIcon() { 
    .icon{ 
     background: url("settings.png"); 
    } 
    &:hover .icon, & .icon:hover{ /* & here means .SettingsButton */ 
     background: url("settings_hover.png"); 
    } 
    } 
} 

.SettingsButton { 
    height: 50px; 
    width: 200px; 
    #icons > .settingsIcon(); 
} 

Answer 2

Это мое понимание того, что вы можете решить эту проблему с помощью extend тоже.

.settingsIcon { 
    background: url("settings.png"); 
    &:hover { 
     background: url("settings_hover.png"); 
    } 
} 


.SettingsButton { 
    height: 50px; 
    width: 200px; 
    &:extend(.settingsIcon all); 
    .icon { 
     &:extend(.settingsIcon all); 
    } 
} 

выходы:

.settingsIcon, 
.SettingsButton, 
.SettingsButton .icon { 
    background: url("settings.png"); 
} 
.settingsIcon:hover, 
.SettingsButton:hover, 
.SettingsButton .icon:hover { 
    background: url("settings_hover.png"); 
} 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
} 

Обратите внимание, что выше генерировать не используется .settingsIcon селектор в вашем CSS. Причина Меньше не позволит вам расширить Примеси (см: https://github.com/less/less.js/issues/1177), которые не выход, вы можете решить только это, поставив .settingsIcon декларацию в другом файле @import этот файл, используя ключевое слово reference:

settingsicon.less :

.settingsIcon { 
    background: url("settings.png"); 
    &:hover { 
     background: url("settings_hover.png"); 
    } 
} 

project.less:

@import (reference) "settingsicon.less"; 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
    &:extend(.settingsIcon all); 
    .icon { 
     &:extend(.settingsIcon all); 
    } 
} 

Теперь компиляции project.less генерирует:

.SettingsButton, 
.SettingsButton .icon { 
    background: url("settings.png"); 
} 
.SettingsButton:hover, 
.SettingsButton .icon:hover { 
    background: url("settings_hover.png"); 
} 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
} 

-

NB вы не ищете CSS for hover that includes all child elements в первую очередь?

обновление @harry писал:

Мое понимание было то, что тот же фон необходимо применять для .SettingsButton: парить .Icon и .SettingsButton .Icon: парить только.

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

С settingsicon.less быть снова:

.settingsIcon { 
    background: url("settings.png"); 
    &:hover { 
     background: url("settings_hover.png"); 
    } 
} 

Вы можете использовать:

@import (reference) "settingsicon.less"; 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
    &.icon { 
    &:extend(.settingsIcon); 
    } 
    &:hover, & .icon:hover { 
    &:extend(.settingsIcon:hover); 
    } 
} 

или:

@import (reference) "settingsicon.less"; 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
    & .icon { 
    &:extend(.settingsIcon all); 
    } 
    &:hover { 
    &:extend(.settingsIcon:hover); 
    } 
} 

которые оба компилировать в:

.SettingsButton.icon { 
    background: url("settings.png"); 
} 
.SettingsButton:hover, 
.SettingsButton .icon:hover { 
    background: url("settings_hover.png"); 
} 
.SettingsButton { 
    height: 50px; 
    width: 200px; 
}