Question

我有一个样式库，其中包含我项目的一般样式。该库包装在一个library.css文件中。在这个图书馆里，我有一个班级a。

在我的scss个样式表之一中，我希望从a扩展此library.css：

@import 'library.css';

.b {
 @extend .a
}

当我这样做时，我告诉我a中找不到课程library.css。

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

Answer 1

当您在Sass代码中添加@import at-rule时，您需要小心您希望实现的目标。 @import实际上是有效的CSS，因此Sass需要在此评估和计算您的意图。 Sass扩展了CSS @import规则，但没有重新创建它。根据{{3}}：

@import需要导入文件名。默认情况下，它会查找要直接导入的Sass文件，但在某些情况下它会编译为CSS @import规则：


如果文件的扩展名为.css。

如果文件名以http：//。
开头
如果文件名是url（）。

如果@import有任何媒体查询。

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

@import 'library.css';

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

您可以执行的操作是从@import规则中删除文件扩展名。

@import 'library';

.b {
 @extend .a
}

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

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

%a {
  color: red;
}

占位符选择器的好处是它们没有自己的输出。根据{{3}}：

在没有使用@extend的情况下，使用占位符选择器的规则集将不会呈现给CSS。

它们的重要性和实用性详尽the documentation。

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

.b {
  @extend %a;
}

要确保您的library.css文件一致，请将其转换为Sass，导入包含占位符选择器的相同部分文件，并在@extend选择器中使用.a指令同样。

@import 'placeholders';

.a {
    @extend %a;
}