sass模块化用@use替代@import实现样式作用域隔离，组件独立文件+语义类名map集中管理+响应式变量同步测试配置，确保样式可定位、可替换、可验证。
为什么直接写 .button 类在测试中总出问题
因为 CSS 本身没有作用域，.button 一改，所有用它的地方都可能意外变形；测试时你改了按钮颜色，结果表单里的提交按钮、弹窗里的取消按钮全跟着变——这不是可测试，这是“连坐式维护”。Sass 的模块化不是为了写得爽，是为让样式变更的影响范围可控。
用 @use 拆组件，而不是 @import
@import 是全局污染源，所有变量、混合宏、CSS 规则都会泄漏到引入处；@use 则强制封装，只暴露你明确 public 的内容。测试时你能单独加载一个按钮模块，不带导航栏、不带卡片、不带任何副作用。
实操建议：
- 每个视觉组件建独立文件：
_button.scss、_card.scss，开头统一加@forward或@use控制导出 - 禁止在
_button.scss里@use 'variables'—— 把依赖收口到顶层或配置层，组件内部只用传入参数 - 测试时用
@use 'components/button' as button，然后调button.$primary-color或button.button()，路径和命名都清晰可断言
怎么让 Sass 组件能被 JS 测试工具识别
CSS 类名是 JS 测试的唯一锚点，但 .btn--primary 这种 BEM 写法在 Sass 里容易散落在各处。如果测试脚本要断言“点击后按钮变成 loading 状态”，它得知道 loading 类到底叫什么、是否拼写一致、是否被条件编译掉了。
实操建议：
- 把所有语义类名集中定义为 map：
$button-variants: (primary: 'btn--primary', loading: 'btn--loading') - 用
map-get($button-variants, primary)生成最终 class，JS 测试用同一份 map 做断言（通过 JSON 导出或构建时注入） - 避免用
{@if $size == 'lg'}动态拼接类名——这类逻辑无法静态提取，测试时只能靠字符串匹配，极易漏掉空格或大小写
测试覆盖率低？先检查 :hover 和 @media 是否被隔离
很多样式组件在桌面端看着没问题，一跑移动端测试就挂，原因是 @media (max-width: 768px) 写在组件文件里，但没配对应测试 viewport；或者 :hover 样式在无鼠标环境（如 CI 中的 Puppeteer）下根本不会触发，导致视觉回归测试失效。
实操建议：
- 把响应式断点抽成变量：
$breakpoint-sm: 768px，并在测试配置里同步该值（比如 Jest + Puppeteer 设置emulateViewport: { width: $breakpoint-sm - 1, height: 600 }） - 交互状态用伪类开关控制：
.button.is-loading:hover而非.button:hover.is-loading，前者可被 JS 添加is-loading类后稳定触发 - 避免在
@media块里嵌套:hover—— 这会让 CSS 选择器权重突变，测试时模拟 hover 可能不生效
Sass 拆组件不是为了目录好看，是让每一行样式都能被定位、被替换、被验证。最容易被忽略的是：组件间的依赖关系必须显式声明，不能靠文件顺序或隐式变量传递——否则测试环境里少引一个 _mixins.scss，整个样式树就静默崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
