将Sass Mixin抽离为独立库并按功能拆分文件，通过@use引入并使用命名空间避免冲突，结合Design Tokens统一变量管理，提升多项目复用性与维护效率。
在多项目中复用 CSS 或 Sass Mixin，关键在于模块化设计和合理组织代码结构。直接复制粘贴虽然简单，但维护困难、容易出错。以下是几个实用技巧，帮助你在多个项目中高效复用 Sass Mixin。
1. 抽离公共 Mixin 到独立库
将常用的 Mixin（如响应式布局、字体处理、边框圆角等）集中到一个独立的 Sass 库中。这个库可以是一个私有 npm 包或 Git 子模块。
- 创建一个 _mixins.scss 文件，按功能分类管理 Mixin
- 使用 npm/yarn 安装该包，在各项目中通过 @use 或 @import 引入
- 例如：
@use 'my-design-tokens/mixins' as *;
2. 使用命名空间避免冲突
当多个项目引入相同的 Mixin 时，命名冲突是常见问题。Sass 的 @use 规则自带命名空间机制，能有效隔离作用域。
- 推荐使用
@use 'mixins' as m;，调用时写成m.flex-center() - 这样即使本地也有同名函数，也不会覆盖
- 团队协作时统一前缀风格，提升可读性
3. 按功能拆分 Mixin 文件
不要把所有 Mixin 塞进一个文件。按功能划分更利于复用和按需加载。
立即学习“前端免费学习笔记（深入）”；
- 例如：_flex.scss、_typography.scss、_animation.scss
- 主入口文件 index.scss 中统一导出：
@forward 'flex'; @forward 'typography'; - 项目只需引入 index，即可获得完整能力集
4. 配合 Design Tokens 提高一致性
Mixin 往往依赖颜色、间距、断点等变量。把这些变量提取为 Design Tokens，并与 Mixin 一起发布。
- 定义 _variables.scss 存放 $breakpoints、$border-radius-sm 等
- Mixin 内部引用这些变量，确保行为一致
- 项目可选择覆盖部分变量，实现定制化而不改源码
基本上就这些。关键是把 Mixin 当作可维护的“工具包”来设计，而不是零散片段。只要结构清晰、发布方便，跨项目复用自然顺畅。不复杂但容易忽略。
