为什么要在scss / css中的文件名“ _”或“ _”前面放置?


147

为什么要_在scss中的文件名前面放置?

_filename.scss-为什么需要_

Answers:


147

_(下划线)是scss的一部分。这意味着样式表将被导入(@import)到主样式表,即styles.scss。使用partials的优点是您可以使用许多文件来组织代码,并且所有内容都将被编译到一个文件中。


3
但是import '_file';import '_file';同样的事情对吗?
tom10271 '17

20
@aokaddaoc似乎您编写了相同的代码行:)
Amit

20
噢,谢谢你指出我的错误。“但是import '_file';import 'file';同样的事情对吗?”
tom10271 '17

5
如果我以仅向我的编译器/预处理器发送一个文件的方式来构造文件,那么为什么我的文件前面带有前缀_呢?我正在考虑从文件名中删除下划线。Sass文件是否是部分文件(即,可导入的代码),应取决于其在项目体系结构中的位置,而不是文件的命名方式。
ESR

1
@ESR:同意,此功能在现代Web开发环境中感觉有些过时了。_如果您以合理的方式组织项目,则绝对不需要s。
克里斯·杰恩斯

55

下划线开头的sass文件是部分文件。这是将样式分成逻辑部分的一种好方法。使用时,这些文件都会在编译时合并@import

从Sass语言指南中:

您可以创建部分Sass文件,其中包含一些CSS片段,您可以在其他Sass文件中包含这些片段。这是模块化CSS并帮助使事情易于维护的好方法。局部文件只是一个以下划线开头的Sass文件。您可能将其命名为_partial.scss。下划线让Sass知道该文件只是部分文件,不应将其生成为CSS文件。Sass局部变量与@import指令一起使用。

http://sass-lang.com/guide


13

如果在文件名前面加上“ _”,则除非将其导入到另一个不完整的sass文件中,否则不会在CSS中生成它。

假设您的文件夹结构是这样的

/scss
 style.scss
 _list.scss
/css

如果您运行命令

sass --watch scss:css

仅将创建style.css和style.css.map文件,sass编译器将省略_list.scss而不将其内容转换为CSS文件。

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map

可以使用局部的唯一方法是使用以下命令将它们导入到另一个.scss文件中:

@import 'list.scss';

如果删除_list.scss前面的“ _”,则命令的结果将为

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

使用partials的主要目的是将我们的CSS代码分解为易于维护的几部分。希望这可以帮助。谢谢。


2
这是正确的答案。但是,您也没有提到_index.scss的特殊情况: sass-lang.com/documentation/at-rules/import#index-files
tiffon

11

带有_(下划线)的文件将被编译器忽略。但是,所有这些文件都导入到单个主SCSS文件(即styles.scss)中,该文件实际上是已编译的文件(名称中没有_(下划线))

最终目标是仅编译一个SCSS文件,结果只有一个CSS文件,这具有各种优点。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.