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

Posted 2023-03-06

【中文标题】如何从 Sass 中的 CSS 文件扩展类？

【英文标题】：How to extend a class from a CSS file in Sass?

【发布时间】：2018-07-15 09:57:19

【问题描述】：

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

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

@import 'library.css';

.b 
 @extend .a

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

有没有办法从 CSS 样式表中扩展一个类？

【参考方案1】：

当您在 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;