为什么我的SASS @import进入我的CSS @import？

Question

好吧，例如，假设我有main.css，main.sass，about.sass和contact.sass。

main.sass应该有@import about.sass和@import contact.sass。然后，当编译main.sass时，main.css应该包含about.sass和contact.sass的所有内容。不是@ import的。

Main.sass

@import 'tools/fonts' 
@import 'tools/normalize' 
@import 'tools/grid' 

现在，当这个被转换为main.min.css它看起来完全一样main.sass

@import url(tools/fonts.css); 
@import url(tools/normalize.css); 
@import url(1-tools/grid.css); 

不应该有任何@imports ，只是组合的CSS代码？

Answer 1

要导入的文件没有以下划线开头的名称。如果文件以下划线开头，则SASS知道它是一个部分文件，并且应该包含在任何导入的位置。

如果一个文件名不是以下划线开头，那么它将会以它自己的CSS文件生成。

此行为描述为here。

局部模板

如果您有要导入，但不希望编译成一个CSS文件SCSS或萨斯文件，你可以一个下划线添加到文件名的开头。这将告诉Sass不要将其编译为普通的CSS文件。然后您可以导入这些文件而不使用下划线。

例如，您可能有_colors.scss。然后将不会创建_colors.css文件，并且您可以执行

@import "colors"; 

和_colors.scss将被导入。

请注意，您不得在同一个目录中包含具有相同名称的部分和非部分。例如，_colors.scss可能不会与colors.scss一起存在。