我已经阅读了很多关于在 sass 中导入 sass 文件的文章，但我似乎无法理解它。似乎有很多不同的方法。
我尝试复制一个看起来像这样的家伙设置：
global
- style.scss
Components
- buttons.scss
- colors.scss
- fonts.scss
- etc.
Utils
- normalize.scss
假设这是我的设置。有人说我应该用下划线命名每个 scss 文件：_buttons.scss，而其他人说不要这样做。
如果我在我的style.scss 中工作，我仍然需要像我一直使用的那样使用import url("components.buttons.scss")，还是我错过了什么？如果我没有遗漏什么，那么这个设置和典型的 css 设置有什么区别？
【问题讨论】：
使用下划线命名您的 sass 文件通常意味着它被理解为该文件是 @imported，因此不需要（也不会！）编译为独立文件——尽管这可能取决于关于你的构建系统以及你的 sass 是如何被编译的。
使用来自the command line 的 sass，假设您有以下文件集：
stylesheets/
_reset.scss
_fonts.scss
_header.scss
contact-page.scss
style.css
style.scss 可能包含的位置：
@import 'reset.scss';
@import 'fonts.scss';
@import 'header.scss';
（请注意，使用 sass 导入时不需要包含下划线）
编译后，你的新stylesheets/目录将只包含style.css和contact-page.css，而style.scss将包含reset、fonts和header的所有内容。带下划线的文件不会自己编译。
如果您将_reset.scss 重命名为reset.scss，它将编译为reset.css，但它的内容也将包含在style.css 中，因为您也在导入它。
所以：如果您不需要该文件本身并且@import将其放入另一个文件中，请在文件名中使用下划线。
【讨论】：
这就是我们构建 sass 项目的方式。
<pre>stylesheets/
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _utility.scss # Module name
| |-- _colors.scss # Etc...
| ...
|
|-- partials/ # Partials
| |-- _base.sass # imports for all mixins + global project variables
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _grids.scss # grids
| |-- _typography.scss # typography
| |-- _reset.scss # reset
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file
</pre>主要的sass文件如下
// Modules and Variables
@import "partials/base";
// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";
【讨论】：
如果您在文件名的开头添加下划线，Sass 将不会编译它。因此，如果您不想将 colors.scss 编译为 colors.css，请将文件命名为 _colors.scss。以这种方式命名的文件在 Sass 术语中称为部分文件。
更多信息你可以阅读here。
【讨论】：