部分 Sass 文件中的下划线 [英] Underscore in partial Sass file

问题描述

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

Is it necessary to have a .scss partial file start with an underscore? The documentation states that a partial should start with an underscore, because the file would otherwise compile to a CSS file.

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

However I've noticed gulp-sass compiles files without an underscore into one complete CSS file just fine.

推荐答案

1. 如果您不希望将部分内容生成到 css 文件.

1. Partials must start with an underscore if you do not want them to be generated into a css file.

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

2. A scss file can import another file without an underscore and still compile correctly.

以这个例子为例:

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

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

Here we can see that site-header.scss and site.scss do not have underscores. If I ran a gulp task to compile anything within the sass folder, two files would be output.

site-header.css
site.css

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

We do not want to generate site-header.css but because we have omitted the underscore the compiler only ignores files with an underscore and generates a css file for it.

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

site-header.scss can still be referenced in site.scss with an @import

@import 'components\site-header';

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

This will result in the same outcome whether it is prefixed with an underscore or not.

这篇关于部分 Sass 文件中的下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！