我知道我可以@extend .foo：hover,但有没有办法@extend .foobar基本/默认属性,而不扩展伪类的定义,如：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;
}
}
解决方法
您必须以这样的方式重写选择器：您只需要精确扩展所需的部分：
%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;
}
}
