# 模块化结构

URL: https://caijiao.org/css/12-preprocessor/04-structure
Source: docs/css/12-preprocessor/04-structure.md
Description: Sass / SCSS 支持模块化结构，将样式拆分为多个文件，通过 '@import' 或 '@use' 实现组织和复用，提升项目可维护性。

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

---

## 1. 分文件编写

一般将样式拆分为：

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

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

---

## 2. 导入模块

### 使用 `@import`（旧方法）

```scss
@import "variables";
@import "mixins";
@import "base";
@import "layout";
@import "components";
```

### 使用 `@use`（推荐）

```scss
@use "variables";
@use "mixins";
@use "base";
@use "layout";
@use "components";
```

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

## 模块化结构示例

[在线代码演示](/css/demos/39.html)