时间戳

首页 > 解决方案 > 使用 scss @extend 伪选择 CSS

css - 使用 scss @extend 伪选择 CSS

问题描述

可以做@extend .foo但显然不行@extend .foo:focus。

我正在处理一个 3rd 方组件，focused当它认为它是焦点时，它会添加它自己的类。用于应用@extendBootstrap 样式可以正常工作，但是因为第 3 方组件没有得到 a :focus，.form-control:focus所以永远不会匹配。

我的 SCSS 原则上是：

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

@extend .form-control:focus;但是不编译。

.form-control:focus目前，如果不将CSS复制到 中，我无法弄清楚如何做到这一点.thirdparty.thirdparty-focused，这显然是相当不理想的。

是否有某种@extend .form-control:focus;等价的可能，如果没有，有什么建议比复制 N 行 CSS 以匹配 Bootstrap 的其余部分更好？

标签： csssass

解决方案

@extend .form-control:focuswill act as a selector, specifically looking for a rule named .form-control:focus. 这是一个插图。

解决您的问题的最佳方法是:focus使用 -selector 外包原始 Bootstrap 类的伪选择器，%然后将其重新扩展到其中 - 这样您就可以单独调用它。

%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;
}

推荐阅读