您可以使用占位符。
%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;
}
尝试这个解决方案。这对我有用 http://jsbin.com/lezuwalida/edit?html,css,输出
生成的CSS看起来是一样的
.demon:hover, .demon.demo {
outline: 3px solid red;
}
.demon2:hover, .demon2.demo2 {
outline: 3px solid red;
}
对我来说,它可以使用这种较新的 sass 语法。
.link:hover {
.button {
@extend .other-button, :hover;
}
}
处理所有这些事情的一个好方法是使用变量, 例如,如果您定义这样的内容:
$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;
}
}
}
希望这对您有帮助