模块化结构

大型项目中，合理拆分和组织样式文件非常重要。Sass 提供了模块化机制，支持将样式拆分成多个部分，然后在主文件中导入，便于管理和复用。

---

1. 分文件编写

一般将样式拆分为：

• _variables.scss — 存放变量
• _mixins.scss — 存放混入（Mixin）
• _base.scss — 基础样式
• _layout.scss — 布局样式
• _components.scss — 组件样式

文件名前加下划线 _，表示是部分文件（partial），不会被单独编译。

---

2. 导入模块

使用 @import（旧方法）

@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';

使用 @use（推荐）

@use 'variables';
@use 'mixins';
@use 'base';
@use 'layout';
@use 'components';

@use 会启用命名空间，避免命名冲突。

模块化结构示例

loading