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

Question

我有一个样式库,包含我项目的一般样式.该库被打包到一个library.css文件中.在这个图书馆里,我有一堂课a.

在我的一个scss样式表我想延长这种CALSS a来自library.css:

@import 'library.css';

.b {
 @extend .a
}

当我这样做时,我被告知a没有找到课程library.css.

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

Answer 1

当您@import为Sass代码添加一个规则时,您需要小心您希望实现的目标.@import实际上是有效的CSS,所以Sass需要在这里评估并弄清楚你的意图.Sass扩展了CSS @import规则并且不重新创建它.根据文件:

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

• 如果文件的扩展名是.css.
• 如果文件名以http://开头.
• 如果文件名是url().
• 如果@import有任何媒体查询.

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

@import 'library.css';

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

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

@import 'library';

.b {
 @extend .a
}

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

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

%a {
  color: red;
}

占位符选择器的好处是它们没有自己的输出.根据文件:

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

它们的重要性和实用性在本页详述.

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

.b {
  @extend %a;
}

并确保您的library.css文件是一致的,将其转换为Sass,导入包含占位符选择器的相同部分文件,并简单地使用@extend指令内部.a选择器.

@import 'placeholders';

.a {
    @extend %a;
}