为什么在SCSS文件名前面要加上`_`

SCSS允许开发人员以更有结构化的方式编写CSS。此外，我们可以在使用SCSS时创建多个CSS文件，并在主SCSS文件中导入所需的文件。

在本教程中，我们将看到在SCSS中将_放在文件名前面的目的。

何时应该在SCSS文件名前面放置`_`

无论何时在SCSS中的文件名前面加上“_”，编译器都会在编译SCSS时忽略该文件。如果文件名以“_”字符开头，文件就会变成部分文件。

例如，我们有两个文件名为“style.scss”和“_partial.scss”。编译器只会编译style.scss文件，并忽略_partial.scss文件。然而，如果我们需要使用_partial.scss文件的CSS，可以在style.scss文件中导入它。

示例1

下面的示例演示了如何在html中使用SCSS。

文件名 – demo.html

我们使用SCSS的编译器生成的“”标签在下面的文件中添加了一个“style.css”文件。在输出中，用户可以观察到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;
}

示例2

<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>

示例3

在这个示例中，我们演示了如何在文件名前面加上‘_’，以及如何在主css文件中使用它的CSS。

文件名 – demo.html

下面的文件包含了简单的HTML代码，包括<head>标签中的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. json文件。Scss文件，文件名前加上_ 。之后，用户需要在文件中添加以下代码。编译SCSS代码时，编译器会忽略这个文件中的代码

$text-color: blue;
$border-width: 2px;
$border-style: solid;
$border-color: green;

文件名– style.scss

现在，用户需要将以下代码添加到样式中。SCSS文件，它是主CSS文件。在下面的代码中，我们从_partial.css文件中导入了css。通过这种方式，我们可以使用部分文件的代码。

@import "partial"
div {
   color:  $text-color; border:$ border-width  $border-style$ border-color;
}

文件名– style.css

每当我们编译样式时。它会自动生成style.css文件。

div {
   color: blue;
   border: 2px solid green;
}

示例4

<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添加不同的部分文件，并在需要时使用它们。