Sass @import 使用前导下划线

Posted 2023-03-07

【中文标题】Sass @import 使用前导下划线

【英文标题】：Sass @import using leading underscore

【发布时间】：2015-03-14 19:20:42

【问题描述】：

我了解在不使用前导下划线的情况下导入 SASS/SCSS 部分是最佳做法；例如

@import 'normalize-scss/normalize'; 
// this imports ./normalize-scss/_normalize.scss

我对于书呆子完整性的问题是，如果使用下划线导入文件会有什么后果吗？

@import 'normalize-scss/_normalize';

【问题讨论】：

当你有两个文件 __test.scss 和 _test.scss 而你 @import "_test" 时会发生什么

相关：Why put in front of the file name “_” or “_” in scss/css?.

【参考方案1】：

没有。如果您的文件是 _foo.scss，那么所有这些导入都具有相同的结果，只要您没有任何不明确的文件名（除非可能存在任何副作用）：

@import "foo";
@import "foo.scss";
@import "_foo";
@import "_foo.scss";

同名但扩展名不同的文件

唯一需要扩展的情况是，如果您在同一搜索路径中同时拥有 _foo.scss 和 _foo.sass。如果不指定哪一个，会出现以下错误：

    error sass/test.scss (Line 7: It's not clear which file to import for '@import "test/bar"'.
Candidates:
  test/_bar.sass
  test/_bar.scss
Please delete or rename all but one of these files.
)

同名的文件，但有一个下划线前缀

如果您同时拥有 foo.scss 和 _foo.scss，则 foo.scss 将优先。如果您想改用 _foo.scss，则需要在 import 语句中添加下划线。

@import "test/_foo";

无论你的导入语句是什么样子，Sass 都会在你每次保存时发出警告：

WARNING: In /path/to/test:
  There are multiple files that match the name "bar.scss":
    _bar.scss
    bar.scss

【讨论】：

如果引擎默认检查_foo.scss，那么使用@import "foo";肯定是最快的。宝贵的毫秒！

多么奇怪的设计决定 - 将文件视为相同。

注意： SASS 团队不赞成使用@import，转而使用@use。你可以在这里查看所有内容：sass-lang.com/documentation/at-rules/import

【参考方案2】：

如果您在文件名的开头添加下划线，Sass 将不会编译它。因此，如果您不想将 colors.scss 编译为 colors.css，请将文件命名为 _colors.scss。以这种方式命名的文件在 Sass 术语中称为部分文件。

更多关于 Sass 中的导入功能，你可以找到here

【讨论】：

我认为 OP 在导入过程中询问的更多。如果您正在编译 main.scss，并且 main 有两个导入 foo.scss and _bar.scss，它们将以相同的方式编译。在这种情况下，sass 编译器不会区别对待它们。

【参考方案3】：

@import 'normalize-scss/_normalize';

这只会将_normalize.scss 文件视为非部分文件。

因此，如果您希望该文件成为部分文件。然后在实际文件名的前面添加另一个下划线。所以文件名将是__normalize.scss.