用\_variables.scss、\_mixins.scss、\_base.scss打底，按功能分局部文件，统一在main.scss中@use导入；变量管“是什么”，Mixin管“怎么用”；@use需显式命名空间访问变量，避免循环依赖和冗余输出。
怎么把全局CSS拆成Sass模块又不乱套
直接说结论：用 _variables.scss、_mixins.scss、_base.scss 三个基础模块打底，再按功能或页面分 _buttons.scss、_header.scss 这类局部文件，最后统一在 main.scss 里 @use 或 @import。别一上来就建二十个文件夹。
常见错误是把所有样式塞进一个 global.scss，改个颜色要全局搜 #333；或者反过来，每个组件都重复写 display: flex 和 align-items: center，失去复用意义。
-
@use比@import更安全——它默认带命名空间，避免变量冲突（比如两个模块都定义了$spacing，@use "mixins" as m;就得写m.$spacing） - 变量只放真正会变的值：
$color-primary、$radius-sm，别把font-weight: 600单独抽成$fw-semibold——除非全项目真有十几处用到且可能调整 - 所有模块文件名必须以下划线开头（如
_reset.scss），否则会被 Sass 当作入口文件单独编译，导致重复输出 CSS
Sass变量和Mixin在全局样式里的实际分工
变量管“是什么”，Mixin 管“怎么用”。很多人混淆这两者，结果写一堆 @mixin text-style() 其实只是换个方式设 color 和 font-size，没抽象出行为逻辑。
典型场景：按钮样式需要适配暗色模式、禁用态、尺寸变化。这时候 $btn-padding 是变量，@mixin btn-variant($bg, $text) 才是 Mixin。
- 变量适合放：颜色、断点、z-index 层级、字体大小阶梯（
$fs-h1,$fs-body） - Mixin 适合封装：需要传参+组合多条声明的逻辑，比如
@mixin responsive-font($min, $max)里同时写font-size和clamp() - 别在 Mixin 里硬编码颜色值——应接收参数或读取变量，否则失去灵活性
为什么 @use 后 color-primary 报错找不到
这是新手最常卡住的地方：写了 @use "variables";，但直接用 color: $color-primary; 报 Undefined variable。
因为 @use 默认启用模块作用域，变量不会自动注入全局。你得显式访问：color: variables.$color-primary;，或者加 as * 提升（不推荐）。
- 安全做法：统一用命名空间，比如
@use "variables" as v;→v.$color-primary - 如果多个模块都要用同一组变量，把变量抽到独立文件（
_tokens.scss），其他模块都@use "tokens" as t; - 注意路径：Sass 查找时不会自动补
.scss后缀，但会尝试匹配_xxx.scss和xxx.scss；确保路径相对main.scss正确，别写成@use "../styles/variables"却把文件放在src/scss/
模块化之后，CSS体积反而变大了怎么办
不是模块化错了，是没控制好输出粒度。Sass 本身不压缩、不去重，@use 多次引入同一模块也不会自动 dedupe，但变量/Mixin 不会重复生成 CSS —— 真正膨胀的是你无节制地在每个模块里 @include 一套完整重置或工具类。
- 基础重置（
normalize、box-sizing）只在_base.scss写一次，别在每个组件里再@include reset-all - 避免“为复用而复用”：一个只在登录页用的
@mixin login-form-layout就不该塞进_mixins.scss，它属于_login.scss的私有逻辑 - 构建时用 PostCSS +
cssnano做压缩和去重，Sass 层面专注结构清晰，别指望它替你优化体积
最易被忽略的一点：模块间依赖关系不能循环。比如 _buttons.scss @use "_mixins" 没问题，但如果 _mixins.scss 又反过来 @use "_buttons"，Sass 编译直接报错，且错误提示极不友好——只会说 “Cannot resolve import”，得自己顺藤摸瓜查依赖图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
