Question

我有一个默认状态和悬停状态的Less mixin。现在，当我将鼠标悬停在父元素上时，我需要在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悬停相同的效果。所以我认为我需要做这样的事情，我打电话给＆＃39;以某种方式hover的{{1}}。像这样的东西（无效的少代码）

settingsIcon

我该怎么做？

Answer 1

重新编写mixins可能会更好，如下例所示。基本上我们将您的基本设置和hover设置拆分为同一命名空间（#icons()）中的两个不同的mixin，然后根据需要调用它们。

#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;
}

请注意，上面会在CSS中生成一个未使用的.settingsIcon选择器。原因Less不能让你扩展不输出的mixin（参见：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;
}

-

首先，你不是在寻找CSS for hover that includes all child elements吗？

<强>更新 @harry写道：

我的理解是需要应用相同的背景.SettingsButton：hover .icon和.SettingsButton .icon：仅悬停。

我认为这是有道理的。你也可以通过使用extend来做到这一点，但我也同意延长同一个类两次也不是那么干。

再次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;
}

在mixin中触发悬停状态

2 个答案: