应使用 @use 替代 @import 以避免变量污染，因 @use 强制封装和显式访问，而 @import 将内容平铺至全局；需用 as 别名、相对路径或别名引用，禁用 URL 和绝对路径，第三方库应按需引入，局部文件须以下划线开头，嵌套不超过三层并优先用 &，变量命名需语义化且集中管理，@mixin 仅用于有参数变化的逻辑。
用 @use 替代 @import 避免变量污染
旧项目还在用 @import 拼接样式文件，很容易出现变量覆盖、命名冲突、CI 构建失败却查不出原因的问题。根本不是语法过时，而是作用域模型完全不同：@import 把所有内容平铺进全局，@use 强制封装 + 显式访问。
实操要点：
-
@use "variables" as vars→ 后续必须写vars.$primary-color，不能直接用$primary-color - 路径必须是相对路径或
includePaths配置的别名，不能用 URL 或绝对路径 - 第三方库如 Bootstrap，只
@use "bootstrap/scss/functions"拿函数，别@use "bootstrap/scss/bootstrap"全量引入 CSS 规则 - 局部文件（如
_mixins.scss）必须以_开头，否则会被误编译成独立 CSS
嵌套不超过 3 层，且优先用 & 而非重复写选择器
Sass 嵌套确实让结构更直观，但超过 3 层就容易生成冗长选择器、拖慢渲染、增加维护心智负担。尤其要注意伪类和 BEM 场景下，& 是避免手误的关键。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 写
.card .card__header .card__header-title这种重复前缀，其实只需.card { &__header { &__title { ... } } } - 写
.btn:hover { color: red; }却忘了加&，结果编译出.btn:hover .btn:hover这种无效选择器 - 在媒体查询里嵌套过深，导致最终 CSS 选择器权重爆炸，覆盖逻辑难追溯
变量命名要带语义，不只存值，还要表达用途
定义 $blue-500 不如定义 $color-primary；$spacing-4 不如 $spacing-md。变量不是“颜色值容器”，而是设计系统的契约接口。
实操建议：
- 按用途分组：用
$color-text-primary、$color-border-divider，而不是$gray-300、$gray-400 - 间距统一用语义单位：
$spacing-xs、$spacing-sm、$spacing-lg，背后可映射到4px、8px、16px - 字体大小也走语义：
$font-size-body、$font-size-h2，而非$font-16、$font-24 - 所有变量集中放在
_tokens.scss或_design-system.scss，禁止散落在各模块里
混合宏（@mixin）只封装有参数变化的逻辑
不是所有重复样式都值得抽成 @mixin。如果一个样式块从不传参、永远固定，那它更适合用 %placeholder + @extend；如果逻辑涉及响应式、主题切换、状态推导，才上 @mixin。
典型误用：
- 把
display: flex; align-items: center;封装成无参@mixin flex-center→ 实际应直接写，或用%flex-center - 给按钮写
@mixin button($bg, $color)，但项目里所有按钮背景色都来自$color-primary→ 参数变成硬编码，失去意义 - 在
@mixin里写完整媒体查询，却不支持嵌套调用 → 导致无法组合使用，比如@include responsive-text和@include theme-aware不能叠加
真正该封装的，是像 @mixin respond-to($breakpoint) 这种依赖配置、需动态计算、跨组件复用的逻辑。
