我知道我可以@extend .foo:hover,但有没有办法@extend .foobar base / default属性而不扩展伪类的定义,如:hover,:active等?
例如,我如何更改以下内容以使.foobar仅扩展.foo的默认状态?
.foo {
& {
color:blue;
}
&:hover {
background-color: black;
}
}
.foobar {
@extend .foo;
&:hover {
//As is, I have to override. Any better way?
background-color: transparent;
}
}
(如果没有办法用Sass做到这一点,有没有一种方法可以达到同样的效果?)
答案 0 :(得分:10)
您必须以这样的方式重写选择器,即只扩展您想要的部分:
%foo {
color:blue;
}
.foo {
@extend %foo;
&:hover {
background-color: black;
}
}
.foobar {
@extend %foo;
&:hover {
background-color: transparent;
}
}
但是,根据您将如何扩展/重用.foo类,新的@content指令可能是更好的方法。
@mixin foo {
color: blue;
&:hover {
@content;
}
}
.foo {
@include foo {
background-color: black;
}
}
.foobar {
@include foo {
background-color: transparent;
}
}