现代前端开发 Sass 项目结构惯例

Sass 是 css 的预处理器，赋予了 css 模块化的能力。此文介绍在这种情况下组织下项目结构的惯例

在现代前端开发中，组织 Sass 项目结构时，最常用和推荐的模式是 7-1 模式 (7-1 Pattern)。这个模式的核心思想是将 Sass 文件组织到 7 个不同的文件夹中，并通过一个主文件（通常是 main.scss 或 style.scss）来导入它们。

sass/
|
|-- abstracts/ (或 utils/, helpers/)
|   |-- _variables.scss    # 变量
|   |-- _mixins.scss       # 混合宏
|   |-- _functions.scss    # 函数
|   |-- _placeholders.scss # 占位符选择器 (可选)
|   ...
|
|-- vendors/
|   |-- _bootstrap.scss    # Bootstrap 框架的 Sass
|   |-- _normalize.scss    # Normalize.css 或 Reset.css
|   ...
|
|-- base/
|   |-- _reset.scss        # 重置/标准化样式 (如果 vendors 里没有)
|   |-- _typography.scss   # 文本排版基础样式
|   |-- _base.scss         # HTML 元素的基本样式 (body, html, etc.)
|   |-- _utilities.scss    # 通用工具类 (可选, 如 .clearfix)
|   ...
|
|-- layout/ (或 grid/)
|   |-- _navigation.scss   # 导航栏
|   |-- _grid.scss         # 网格系统
|   |-- _header.scss       # 头部
|   |-- _footer.scss       # 底部
|   |-- _sidebar.scss      # 侧边栏
|   |-- _forms.scss        # 表单布局 (非具体表单元素样式)
|   ...
|
|-- components/ (或 modules/)
|   |-- _buttons.scss      # 按钮
|   |-- _cards.scss        # 卡片
|   |-- _carousel.scss     # 轮播图
|   |-- _dropdowns.scss    # 下拉菜单
|   |-- _modals.scss       # 模态框
|   ...
|
|-- pages/
|   |-- _home.scss         # 首页特定样式
|   |-- _about.scss        # 关于页面特定样式
|   |-- _contact.scss      # 联系页面特定样式
|   ...
|
|-- themes/ (可选)
|   |-- _default.scss      # 默认主题
|   |-- _dark.scss         # 暗黑主题
|   |-- _admin.scss        # 管理后台主题
|   ...
|
`-- main.scss (或 style.scss, app.scss) # 主 Sass 文件，导入所有其他文件

各文件夹用途详解：

1. abstracts/ (或 utils/, helpers/) - 抽象层

   • 用途：存放项目中所有 Sass 工具和辅助函数。这里的文件不应该输出任何 CSS 代码，它们是用来辅助其他 Sass 文件的。
   • 内容示例：
     • _variables.scss：颜色、字体、边距、断点等全局变量。
     • _mixins.scss：可重用的 Sass 混合宏。
     • _functions.scss：自定义的 Sass 函数。
     • _placeholders.scss：占位符选择器（%placeholder），用于 @extend。

2. vendors/ - 第三方库

   • 用途：存放来自外部库或框架的 CSS/Sass 文件。
   • 内容示例：
     • Bootstrap 的 Sass 文件
     • Normalize.css / Reset.css
     • 第三方插件的样式
   • 注意：如果你使用 npm/yarn 管理这些依赖，并且它们提供了 Sass 入口，你可能可以直接从 node_modules 导入，而不是复制到这里。但如果需要定制，复制过来修改会更方便。

3. base/ - 基础样式

   • 用途：定义项目的基础样式，通常是 HTML 元素的默认样式。
   • 内容示例：
     • _reset.scss 或 _normalize.scss：如果 vendors/ 中没有提供。
     • _typography.scss：全局字体设置、标题、段落、链接等文本元素的样式。
     • _base.scss：body, html 等标签的样式，以及一些基本的盒模型设置（如 box-sizing: border-box;）。
     • _utilities.scss：一些常用的工具类，如 .clearfix, .visually-hidden (可选，也可以放在 abstracts/ 作为 mixin)。

4. layout/ (或 grid/) - 布局结构

   • 用途：定义网站或应用的主要布局结构。
   • 内容示例：
     • _grid.scss：网格系统定义。
     • _header.scss：页头样式。
     • _footer.scss：页脚样式。
     • _sidebar.scss：侧边栏样式。
     • _navigation.scss：主导航样式。
     • _forms.scss：表单的整体布局和结构（不是单个输入框、按钮的样式，那些属于 components/）。

5. components/ (或 modules/) - 组件

   • 用途：存放可重用的 UI 组件，如按钮、卡片、提示框等。这是项目中最庞大和最重要的部分。
   • 内容示例：
     • _buttons.scss
     • _cards.scss
     • _modals.scss
     • _alerts.scss
     • _carousels.scss
   • 建议：每个组件一个文件，方便管理和查找。可以结合 BEM (Block, Element, Modifier) 命名规范。

6. pages/ - 页面特定样式

   • 用途：存放特定页面的样式。这些样式仅在对应页面生效，不具有通用性。
   • 内容示例：
     • _home.scss：首页的特定布局或组件调整。
     • _about.scss：关于页面的特定样式。
   • 注意：尽量将可重用的部分抽象到 components/ 或 layout/。只有当样式确实只服务于单个页面时才放在这里。

7. themes/ (可选) - 主题

   • 用途：如果你的项目需要支持多种视觉主题（如暗黑模式、不同品牌主题等），这个文件夹用来存放主题相关的样式。
   • 内容示例：
     • _default-theme.scss
     • _dark-theme.scss
     • _admin-theme.scss
   • 通常，主题文件会覆盖或扩展 abstracts/ 中的变量，或者提供特定的组件变体。

主文件 (main.scss 或 style.scss, app.scss)

这是唯一的、最终会被编译成 CSS 文件的 Sass 文件（其他文件都以下划线 _ 开头，表示它们是 “partials”，不会被单独编译）。它负责按正确的顺序导入所有其他 Sass partials。

现代 Sass (@use 和 @forward) 的导入顺序示例 (main.scss)：

// 1. Abstracts (Utils, Helpers) - 必须最先，因为它们包含变量和工具，会被其他文件使用
@forward 'abstracts/variables'; // 使变量在全局可用 (如果需要)
@use 'abstracts/mixins';
@use 'abstracts/functions';
// ... 其他 abstracts

// 2. Vendors - 第三方库
@use 'vendors/bootstrap'; // 假设 Bootstrap 是模块化的
@use 'vendors/normalize';

// 3. Base - 基础样式
@use 'base/reset';
@use 'base/typography';
@use 'base/base';
@use 'base/utilities'; // 可选

// 4. Layout - 布局结构
@use 'layout/grid';
@use 'layout/header';
@use 'layout/footer';
// ... 其他 layout

// 5. Components - UI 组件
@use 'components/buttons';
@use 'components/cards';
// ... 其他 components

// 6. Pages - 页面特定样式
@use 'pages/home';
@use 'pages/about';
// ... 其他 pages

// 7. Themes - 主题 (可选)
// 通常主题会根据条件导入，或者在不同的构建中导入不同的主题
// @use 'themes/dark';

传统 Sass (@import) 的导入顺序示例 (main.scss)：

// 1. Abstracts
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/functions';

// 2. Vendors
@import 'vendors/bootstrap';
@import 'vendors/normalize';

// 3. Base
@import 'base/reset';
@import 'base/typography';
@import 'base/base';
@import 'base/utilities';

// 4. Layout
@import 'layout/grid';
@import 'layout/header';
// ...

// 5. Components
@import 'components/buttons';
@import 'components/cards';
// ...

// 6. Pages
@import 'pages/home';
// ...

// 7. Themes (可选)
// @import 'themes/dark';

现代前端开发的惯例补充：

1. 文件名以下划线 _ 开头：如 _variables.scss。这告诉 Sass 编译器这是一个 “partial” 文件，不应该被单独编译成 CSS 文件，而只能被导入到其他 Sass 文件中。
2. @use 和 @forward 优先于 @import：
   • @use：加载模块（文件），并将其成员（变量、混合宏、函数）命名空间化，避免全局污染。例如，@use 'abstracts/variables'; 后，使用变量时需要 variables.$primary-color。
   • @forward：允许你将一个模块的成员暴露给导入当前文件的其他文件，而无需显式 @use。常用于组织库或在 main.scss 中重新导出模块。
   • @import 正在被逐步淘汰，因为它会导致全局命名空间污染和难以追踪的依赖关系。
3. BEM 命名规范：在 components/ 和 layout/ 中，使用 BEM (Block, Element, Modifier) 命名约定（如 .card__title--large）可以使 CSS 更具可读性、可维护性和模块化。
4. 与构建工具集成：
   • 现代前端项目通常使用 Webpack, Parcel, Vite 等构建工具。这些工具会配置 sass-loader (Webpack) 或内置支持来编译 Sass。
   • Autoprefixer 通常会自动添加，以处理浏览器前缀。
   • CSS 压缩也会在生产构建中进行。
5. CSS Modules (结合 Sass)：在使用 React, Vue, Angular 等组件化框架时，CSS Modules 是一种流行的做法。你可以为每个组件编写一个 .module.scss 文件，Sass 编译后的类名会自动哈希化，实现局部作用域。

   // Button.module.scss
   .button {
     background-color: blue;
     &:hover {
       background-color: darkblue;
     }
   }

6. 组件驱动开发 (Component-Driven Development)：
   • Sass 结构可以与你的 JavaScript 组件结构相呼应。例如，如果你的 JS 组件在 src/components/Button/Button.js，那么对应的 Sass 文件可以是 src/components/Button/Button.scss (或者 Button.module.scss)。
   • 然后，你的主 main.scss 文件可以从这些组件目录中导入样式。
7. 可维护性和可扩展性：这种结构化方法使得项目更容易维护，新人更容易上手，并且随着项目的增长也更容易扩展。

选择哪种结构最终取决于项目规模和团队偏好，但 7-1 模式是一个非常好的起点，并被广泛认为是最佳实践。