首页 > web前端 > css教程 > 正文

为什么SCSS中文件名前面要加“_”?

WBOY
发布: 2023-08-25 14:09:13
转载
1165 人浏览过

为什么SCSS中文件名前面要加“_”?

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 元素的文本,文本变为斜体。



   

Using the SCSS with HTML.

This is a div element.
登录后复制

文件名 – 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;
}
登录后复制

示例



   

Using the SCSS with HTML.

This is a div element.
登录后复制

示例

在此示例中,我们演示如何在文件名前添加“_”以及如何在主 css 文件中使用其 CSS。

文件名 – demo.html

下面的文件包含简单的 HTML 代码,并在 标记中包含“style.css”文件。



   

Using the SCSS from the _partial.css file with HTML.

Content of the div element.
登录后复制

文件名 - _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;
}
登录后复制

示例



   

Using the SCSS from the _partial.css file with HTML.

Content of the div element.
登录后复制

在 SCSS 中的文件名前插入“_”的主要动机是使文件部分化,以便编译器可以忽略该文件。每当我们需要使用部分文件的css时,我们可以将其导入到主文件中。

使用部分文件的主要好处是我们不需要编写重复的代码,使其更加清晰。例如,我们可以为不同部分的CSS添加不同的部分文件,并在需要时使用它们。

以上是为什么SCSS中文件名前面要加“_”?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!