在SASS或SCSS中将任何类别的:hover扩展到任何其他类别的:hover

Question

是否有一种方法可以将任何类的 &:hover 扩展到任何其他类的 hover 上？

我的代码类似于这样，它停止了两个类的 hover：

HTML

<a href="#" class="button1">Button 1</a>
<a href="#" class="button2">Button 2</a>

SCSS

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background: red;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend .button1:hover
  }
}

- Omer

---

无法重现：http://www.sassmeister.com/gist/3f1c5b1538239b572700 - cimmanon

Answer 1

您可以使用占位符。

%hover {
  background: red;
}

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

或者，也许更好的解决方案是为您的按钮使用更通用的类：

.btn {
  padding: 5px 10px;
  text-decoration: none;
  color: white;

  &:hover {
    background: red;
  }
}

.btn--1 {
  background: black;
}

.btn--2 {
  background: blue;
}

- Denis Frezzato

---

在.button2的hover中添加@extend .button1也可以工作。这是正确的方法吗？ - Omer

它能运行，但不是更好的解决方案，因为它很难阅读并回到你正在扩展的样式。 - Denis Frezzato

谢谢Denis...你的解决方案更好，符合标准 :) - Omer

能否返回一个类名？ - Anupam Maurya

Answer 2

你可以使用mixin。

@mixin hoverStyle {
   &:hover{
     background: red;
   }
}

.button1 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

.button2 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

- Yasin UYSAL

Answer 3

尝试这个解决方案。对我有效。 http://jsbin.com/lezuwalida/edit?html,css,output

生成的CSS看起来一样。

.demon:hover, .demon.demo {
  outline: 3px solid red;
}

.demon2:hover, .demon2.demo2 {
  outline: 3px solid red;
}

- FDisk

Answer 4

处理所有这些东西的好方法是使用变量，例如，如果您定义了以下内容：

$buttons-hover-color: #somecolor;

然后你可以在任何按钮中调用它，如果将来要更改它，只需更改变量，所有按钮都会更新。 另一个重要的事情是，在媒体查询中无法使用扩展功能，因此也许在将来你针对移动设备时不想在移动设备中使用红色，所以你只需要创建另一个变量就可以了。

类似这样：

$btn-hover-color: red;
$btn-hover-mobile: black;

.button1 {
 background: black;
 padding: 5px 10px;
 text-decoration: none;
 color: white;
 &:hover {
  background-color: $btn-hover-color;
 }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background-color: $btn-hover-color;
  }

  @media (max-width: 800px) {
    &:hover {
      background-color: $btn-hover-mobile;
    }
  }
 }

希望这能帮到你。

- Damian Cardozo

---

这不是这里所要求的。 - cimmanon

我在问有关继承（extends）的问题。 - Omer