部分 Sass 文件中的下划线

Posted 2023-02-16

【中文标题】部分 Sass 文件中的下划线

【英文标题】：Underscore in partial Sass file

【发布时间】：2015-09-27 10:54:18

【问题描述】：

.scss 部分文件是否需要以下划线开头？文档指出部分应以下划线开头，否则该文件将编译为 CSS 文件。

但是我注意到 gulp-sass 可以将没有下划线的文件编译成一个完整的 CSS 文件。

【参考方案1】：

1. 如果您不希望将部分生成到css 文件中，则它们必须以下划线开头。

2.scss 文件可以导入另一个不带下划线的文件，并且仍然可以正确编译。

举个例子：

sass
    +-- base
    |   +-- _normalize.scss 
    +-- components  
    |   +-- site-header.scss
    +-- utilities       
    |   +-- _icons.scss
    +-- site.scss

在这里我们可以看到site-header.scss 和site.scss 没有下划线。如果我运行 gulp 任务来编译 sass 文件夹中的任何内容，则会输出两个文件。

site-header.css
site.css

我们不想生成site-header.css，但由于我们省略了下划线，编译器只会忽略带有下划线的文件并为其生成css 文件。

site-header.scss 仍然可以在 site.scss 中使用 @import 引用

@import 'components\site-header';

无论是否带有下划线前缀，这将导致相同的结果。

【讨论】：

如果你将一个没有前置下划线的 Sass 文件导入另一个同样没有前置下划线的 Sass 文件，那么只会生成一个 CSS 文件，因此声明 Partials must start with an underscore if you do not want them to be generated into a css file. 不是真的true - 我可以有不以下划线开头的部分，也不会生成到 CSS 文件中。这取决于您如何将文件发送到编译器，对吧？