CSS 为什么在scss/css文件名之前使用_或者-

在本文中，我们将介绍为什么在scss/css文件名之前经常使用_或者-的原因。这是一种常见的命名规范，在编写CSS样式表时用于标识特定的文件或样式。

阅读更多：CSS 教程

为什么需要使用_或者-？

使用_或者-作为scss/css文件名前缀的主要原因有两点：

隐藏文件

在web开发中，有些文件是用于存储和管理公共或通用的样式，而不是用于直接在页面中引用。这些文件的名称可以通过在文件名前使用下划线_来隐藏。

例如，我们有一个名为”_variables.scss”的文件，用于存储样式表中使用的变量。这样做的好处是，网页加载时不会直接引用这个文件，而只是在其他需要使用这些变量的文件中进行引用。这样可以减少不必要的网络请求，提高网页的加载速度。

特定样式文件

另一种常见的用法是将scss/css文件名前使用-作为特定样式文件的标识。

假设我们有一个命名为”login-button.scss”的文件，用于编写登录按钮的样式。通过在文件名前使用-，我们可以将其与其他样式文件区别开来。

// _variables.scss
$primary-color: #3498db;

// main.scss
@import "_variables";
@import "login-button";

在这个例子中，假设我们有一个主样式文件”main.scss”，它引用了”_variables.scss”和”login-button.scss”。通过在文件名前使用-，我们可以清晰地知道”login-button.scss”是一个特定的样式文件，而不是其他形式的文件。

示例说明

为了更好地理解使用_或者-的目的，我们来看一个具体的示例。

假设我们正在编写一个包含多个页面的网站，每个页面都有自己的特定样式需求。为了更好地组织这些样式，我们可以按照以下文件结构来管理：

styles
├── _variables.scss
├── _mixins.scss
├── base
│   ├── _base.scss
│   ├── _header.scss
│   └── _footer.scss
├── components
│   ├── _button.scss
│   ├── _form.scss
│   └── _carousel.scss
├── _pages.scss
└── main.scss

在这个例子中，我们有一个包含以下文件的styles文件夹：