为什么在 SCSS 中文件名前要加上"_"?

cssweb developmentfront end technology更新于 2024/4/16 8:44:17

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

在本教程中，我们将了解在 SCSS 中文件名前加上"_"的目的。

何时应该在 SCSS 中文件名前加上"_"?

每当我们在 SCSS 中的文件名前加上"-_"时，编译器在编译 SCSS 时都会忽略该文件。如果文件名以"_"字符开头，则该文件将成为部分文件。

例如，我们有两个名为"style.scss"和"_partial.scss"的文件。编译器只会编译 style.scss 文件，而忽略 _partial.scss 文件。但是，如果我们需要使用 _partial.scss 文件的 CSS，我们可以将其导入 style.scss 文件中。

示例

以下示例演示了如何在 HTML 中使用 SCSS。

文件名 - demo.html

我们在下面的文件中添加了一个 style.css 文件，并使用了由 SCSS 编译器生成的"<link>"标签。在输出中，用户可以观察到 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 代码，并在 <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.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 添加不同的部分文件，并在需要时使用它们。