有没有办法将任何类的 &: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
}
}
最佳答案
您可以使用占位符。
%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;
}
关于html - 扩展 & :hover of any class to any other class's hover in SASS or SCSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34350513/