css - 如何从 Sass 中的 CSS 文件扩展类？

Question

我有一个样式库，其中包含我的元素的一般样式。该库被打包到一个 library.css 文件中。在这个库中，我有一个类a。

在我的一个 scss 样式表中，我想从 library.css 扩展这个 calss a:

@import 'library.css';

.b {
 @extend .a
}

当我这样做时，我被告知在 library.css 中找不到类 a。

有什么方法可以从 CSS 样式表扩展类吗？

Answer 1

当您将 @import at 规则添加到您的 Sass 代码时，您需要小心您希望实现的目标。 @import 实际上是有效的 CSS，所以 Sass 需要在这里评估并弄清楚你的意图。 Sass 扩展了 CSS @import 规则并且没有重新创建它。根据the documentation :

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file's extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries.

因此，如果您在 @import at 规则中将 .css 扩展名放在文件名之后，Sass 将只输出这行有效的 CSS 代码。您可以通过删除您的 @extend 指令来测试它，这将使您的代码编译。你会看到整个输出文件是这样的:

@import 'library.css';

Sass 不会遵循该 CSS 文件并使其内容可用于 @extend 指令。

您可以做的是从您的 @import 规则中删除文件扩展名。

@import 'library';

.b {
 @extend .a
}

但是，这实际上会将文件 library.css 的全部内容输出到此 Sass 文件编译成的 CSS 文件中，我假设这不是您的目标。

要解决这个问题，您可以创建一个包含占位符选择器的部分 Sass 文件。

%a {
  color: red;
}

占位符选择器的好处是它们没有自己的输出。根据the documentation :

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

详细介绍了它们的重要性和用处 on this page .

在您的 Sass 样式表中导入部分 Sass 文件并使用 @extend 指令，如下所示:

.b {
  @extend %a;
}

为了确保你的 library.css 文件是一致的，将它转换成 Sass，在它上面导入相同的部分文件，包含你的占位符选择器，然后简单地使用 @extend 指令在 .a 选择器也是如此。

@import 'placeholders';

.a {
    @extend %a;
}