将任何类的悬停扩展到 SASS 或 SCSS 中的任何其他类的悬停

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

Answer 2

Answer 3

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

生成的CSS看起来是一样的

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

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

Answer 4

对我来说，它可以使用这种较新的 sass 语法。

.link:hover {
    .button {
        @extend .other-button, :hover;
    }
}

Answer 5

处理所有这些事情的一个好方法是使用变量， 例如，如果您定义这样的内容：

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

希望这对您有帮助