0

我有一个带有默认状态和悬停状态的 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 hover 上发生的相同效果也会在按钮悬停时触发。所以我认为我需要做这样的事情，我以某种方式“调用” the hoverof settingsIcon。像这样的东西（无效的较少代码）

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

我该怎么做？

4

2 回答 2

1

像下面的例子一样重写你的 mixin 可能会更好。本质上，我们将您的基本设置和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();
}
于 2015-05-07T15:33:55.220 回答
0

据我了解，您也可以通过使用来解决此问题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 中生成一个未使用的选择器。原因 Less 不允许您扩展不输出的 mixins（请参阅：https ://github.com/less/less.js/issues/1177 ），您只能通过将.settingsIcon声明放在不同的文件中@import来解决这个问题使用reference关键字文件：

设置图标.less：

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

项目.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吗？

更新 @harry 写道：

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

我认为这是有道理的。你也可以通过使用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;
}
于 2015-05-09T14:50:41.070 回答