爲什麼我的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一起存在。