◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
为什么SCSS中文件名前面要加“_”？
ID:13115 / 打印
SCSS 允许开发人员以更结构化的方式编写 CSS。另外，我们可以在使用SCSS时为CSS创建多个文件，并将所需的文件导入到主SCSS文件中。
在本教程中，我们将看到在 SCSS 中的文件名前添加“_”的目标。
什么时候应该在 SCSS 中将“_”放在文件名前面？
每当我们在 SCSS 中的文件名之前添加 -_' 时，编译器在编译 SCSS 时都会忽略该文件。如果文件名以“_”字符开头，则该文件将变为部分文件。
例如，我们有两个名为“style.scss”和“_partial.scss”的文件。编译器仅编译 style.scss 文件，而忽略 _partial.scss 文件。但是，如果我们需要使用_partial.scss文件的css，我们可以将其导入到style.scss文件中。
立即学习“前端免费学习笔记（深入）”；
示例
下面的示例演示了如何将 SCSS 与 html 结合使用。
文件名 – demo.html
我们使用“”标签在下面的文件中添加了一个“style.css”文件，该文件是由 SCSS 编译器生成的。在输出中，用户可以观察到 CSS 应用于 div 元素的文本，文本变为斜体。
<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS </i> with HTML. </h2> <div> This is a div element. </div> </body> </html>
文件名 – style.scss
在下面的文件中，我们创建了变量来存储字体大小和样式。之后，我们使用变量来设置 div 元素的样式。
$font-size : 20px; $font-style: italic; div { font-size: $font-size; font-style: $font-style; } 文件名 – style.css
每当我们编译 style.scss 文件时，它都会生成以下代码，供 html 文件使用。
div { font-size: 20px; font-style: italic; } 示例
<html> <head> <style> /* compiled scss code */ div { font-size: 20px; font-style: italic; } </style> </head> <body> <h2> Using the <i> SCSS </i> with HTML. </h2> <div> This is a div element. </div> </body> </html> 示例
在此示例中，我们演示如何在文件名前添加“_”以及如何在主 css 文件中使用其 CSS。
文件名 – demo.html
下面的文件包含简单的 HTML 代码，并在
标记中包含“style.css”文件。<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2> <div> Content of the div element. </div> </body> </html>
文件名 - _partial.css
用户需要创建一个_partial.scss文件，文件名前带有“_”。之后，用户需要在文件中添加以下代码。当我们编译SCSS代码时，编译器会忽略这个文件的代码
$text-color: blue; $border-width: 2px; $border-style: solid; $border-color: green;
文件名 – style.scss
现在，用户需要将以下代码添加到 style.scss 文件中，该文件是主 css 文件。在下面的代码中，我们从“_partial.css”文件导入了 css。这样我们就可以使用部分文件的代码了。
@import "partial" div { color: $text-color; border: $border-width $border-style $border-color; } 文件名 – style.css
每当我们编译 style.scss 文件时，它都会自动生成 style.css 文件。
div { color: blue; border: 2px solid green; } 示例
<html> <head> <style> /* compiled SCSS code from the _partial.css file */ div { color: blue; border: 2px solid green; } </style> </head> <body> <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2> <div> Content of the div element. </div> </body> </html> 在 SCSS 中的文件名前插入“_”的主要动机是使文件部分化，以便编译器可以忽略该文件。每当我们需要使用部分文件的css时，我们可以将其导入到主文件中。
使用部分文件的主要好处是我们不需要编写重复的代码，使其更加清晰。例如，我们可以为不同部分的CSS添加不同的部分文件，并在需要时使用它们。
