我有一个样式库，其中包含我的项目的一般样式。这个库被打包到一个library.css 文件中。在这个库中，我有一个类a。
在我的scss 样式表之一中，我想从library.css 扩展这个类a：
@import 'library.css';
.b {
@extend .a
}
当我这样做时，我被告知在 library.css 中找不到类 a。
有没有办法从 CSS 样式表中扩展一个类？
【问题讨论】：
标签： css sass css-selectors
当您在 Sass 代码中添加 @import 规则时，您需要小心您希望实现的目标。 @import 实际上是有效的 CSS，所以 Sass 需要在这里评估和弄清楚你的意图。 Sass 扩展了 CSS @import 规则并且不会重新创建它。根据the documentation：
@import 需要一个文件名来导入。默认情况下，它会查找要直接导入的 Sass 文件，但在某些情况下它会编译为 CSS @import 规则：
- 如果文件的扩展名是 .css。
- 如果文件名以 http:// 开头。
- 如果文件名是 url()。
- 如果@import 有任何媒体查询。
因此，如果您将 .css 扩展名放在 @import 规则中的文件名之后，Sass 将只输出这行有效的 CSS 代码。您可以通过删除 @extend 指令来测试这一点，这将使您的代码编译。你会看到整个输出文件是这样的：
@import 'library.css';
Sass 不会跟随那个 CSS 文件并使其内容可用于 @extend 指令。
您可以做的是从@import at-rule 中删除文件扩展名。
@import 'library';
.b {
@extend .a
}
但是，这实际上会将文件 library.css 的全部内容输出到此 Sass 文件编译到的 CSS 文件中，我假设这不是您的目标。
要解决这个问题，您可以创建一个包含占位符选择器的部分 Sass 文件。
%a {
color: red;
}
占位符选择器的好处是它们没有自己的输出。根据the documentation：
在不使用任何@extend 的情况下，使用占位符选择器的规则集将不会呈现给 CSS。
它们的重要性和用处详述on this page。
在您的 Sass 样式表中导入部分 Sass 文件并使用 @extend 指令，如下所示：
.b {
@extend %a;
}
为了确保您的 library.css 文件是一致的，将其转换为 Sass，在其顶部导入相同的包含占位符选择器的部分文件，并在 .a 选择器中简单地使用 @extend 指令。
@import 'placeholders';
.a {
@extend %a;
}
【讨论】：