Sass入门：变量、嵌套与混合基础教程

本文深入解析Sass现代开发的核心实践，强调变量必须以$开头的强制语法规范、嵌套层级应严格控制在3层以内以避免特异性灾难和维护困境、@mixin仅用于样式复用而不可替代函数计算（需改用@function实现返回值）、以及彻底摒弃已移除的@import、全面转向作用域清晰且安全的@use模块系统——这些不是可选技巧，而是保障项目可扩展性、协作效率与长期稳定性的硬性准则。

变量声明必须用 $ 开头，否则编译直接报错

Sass 里变量不是写 color = #333，也不是 let color = #333，而是强制要求以 $ 开头。漏写或写成 @、: 都会触发 Invalid CSS after "$": expected identifier 这类错误。

• $primary-color: #2c3e50; ✅ 正确
• primary-color: #2c3e50; ❌ 编译失败，当成普通 CSS 属性处理
• @primary-color: #2c3e50; ❌ 被识别为指令语法错误

变量作用域也得注意：在嵌套规则里重定义同名变量，默认是局部覆盖；想改全局变量得加 !global 标志，比如 $font-size: 16px !global;。

嵌套规则不能无限套，超过 3 层就该拆了

嵌套写法看着爽，.nav { ul { li { a { &:hover { ... } } } } } 但实际生成的 CSS 选择器会变成 .nav ul li a:hover，层级越深，CSS 特异性越强，后期覆盖成本越高，还容易和 BEM 类名冲突。

• 嵌套只适合表达明确父子/子孙关系，比如表单控件内部状态
• 遇到 &.is-active 或 &:focus-within 这类伪类时，别为了“保持嵌套”硬塞进深层结构里
• 编译后 CSS 文件体积会随嵌套深度非线性增长，尤其配合 @media 嵌套时更明显

真要组织复杂 UI，优先用 @use 拆模块，而不是靠嵌套压代码行数。

混合宏（@mixin）别当函数用，不支持返回值

@mixin 是代码块复用机制，不是函数——它不能 @return，也不能把计算结果赋给变量。常见误用是想用它动态算出 margin 值然后返回，结果只能干瞪眼。

• 正确用途：封装带参数的样式组合，比如 @mixin flex-center { display: flex; justify-content: center; align-items: center; }
• 传参支持默认值：@mixin pad($size: 1rem) { padding: $size; }，但参数只能是 Sass 数据类型（数字、颜色、列表等），不能是选择器字符串
• 如果需要“计算+返回”，得用 @function，比如 @function px-to-rem($px) { @return $px / 16px * 1rem; }

混入里调用另一个混入可以，但别形成递归调用，Sass 不做栈深检查，编译时直接卡死或爆内存。

@import 已废弃，@use 才是现代 Sass 模块系统

还在用 @import "variables"？它会把整个文件内容无条件注入当前作用域，变量、混入全变成全局的，命名冲突风险极高。Sass 从 4.0 起就标记为废弃，Dart Sass 2.0+ 已完全移除支持。

• 改用 @use "variables" as var;，之后必须通过 var.$primary-color 访问，作用域清晰
• @use 同一文件只加载一次，不管你在多少个地方写了它，避免重复编译
• 如果旧项目迁移，注意 @import 中的 url() 路径是相对 @import 所在文件的，而 @use 的路径是相对项目根目录（需配 load-path）

最易被忽略的一点：用了 @use 就不能再用 @import 混用，否则 Dart Sass 直接拒绝编译——不是警告，是报错停住。

今天关于《Sass入门：变量、嵌套与混合基础教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！