使用scss@extend伪选定CSS

你可以做

@extend.foo

，但显然不能

@extend.foo:focus

我正在处理一个第三方组件，当它认为它是焦点时，它会添加自己的

焦点

类。使用

@extend

应用引导样式可以很好地工作，但是由于第三方组件没有获得

:focus

，因此

.form控件：focus

永远不匹配

我的SCS原则上是：

.thirdparty {
  @extend .form-control;
}
.thirdparty.thirdparty-focused {
  @extend .form-control:focus;
}

---

@extend.form控件：焦点不编译

目前，如果不将
.form控件：focus
CSS复制到
.thirdparty.thirdparty focused
中，我就不知道如何实现这一点，这显然是不理想的

是某种
@extend.formcontrol:focus
可能是等效的，如果不是，还有比复制N行CSS以匹配引导的其余部分更好的建议吗？
@extend。表单控件：focus
将充当选择器，专门查找名为
的规则。表单控件：focus
。这是一个例子

解决问题的最佳方法是使用
%
-选择器将原始引导类的
：focus
伪选择器外包，然后将其重新扩展到该选择器中，以便可以单独调用它

%focus {
  color: #2196f3;
}

.base {
  color: #000;
  
  &:focus {
    @extend %focus;
  }
}

div {
  @extend .base;
  
  &.focus {
    @extend %focus;
  }
}

// Other Bootstrap components can still call `@extend .base;`

这将编译为：

.base:focus, div:focus, div.focus {
  color: #2196f3;
}

.base, div {
  color: #000;
}