Sass颜色函数如darken()和lighten()基于HSL动态调整亮度，需避免多层嵌套调用；自定义px-to-rem()函数可统一响应式缩放，提升可维护性。
如何用 darken() 和 lighten() 替代手写颜色值
直接写 #3a6ea5 或 rgb(58, 110, 165) 很难看出它和主色的关系，也难统一调整。Sass 的颜色函数能基于一个基础色动态生成变体，改一处就全链更新。
常见错误是把 darken($color, 10%) 当作“变暗 10 个亮度单位”，其实它是 HSL 模式下降低亮度通道 10%，对深色可能过头、对浅色又不明显。
- 推荐先定义
$primary: #4a90e2;，再用$primary-dark: darken($primary, 12%);控制悬停态 - 避免嵌套多层调用，比如
darken(darken($c, 10%), 10%)—— 可读性差且不易调试 - 注意浏览器不支持 Sass 函数，所有计算都在编译时完成，最终 CSS 里只有纯色值
用 rem() 或自定义 px-to-rem() 统一响应式缩放
CSS 原生没有 rem() 函数，但 Sass 支持自定义函数。与其在每个 font-size 或 padding 里反复写 #{16px / 16}rem，不如封装一次。
典型场景是设计稿按 750px 宽，根字号设为 100px（即 1rem = 100px），方便心算：16px → 0.16rem。但手动换算易错，尤其涉及 media query 断点时。
立即学习“前端免费学习笔记（深入）”；
- 定义函数：
@function px-to-rem($px, $base: 100) { @return ($px / $base) * 1rem; } - 调用：
font-size: px-to-rem(16);→ 编译为font-size: 0.16rem; - 别在函数里做条件判断（如“
if $px 则返回 0”）——Sass 函数不支持运行时逻辑，只做静态计算
为什么 map-get() 比重复写断点更可靠
媒体查询断点写死在多个文件里，改一个就得全局搜 min-width: 768px，还容易漏。用 map + map-get() 把断点集中管理，函数只是取值工具。
错误用法是把整个 @media 规则塞进函数返回值 —— Sass 函数只能返回值，不能返回声明块。
- 先建映射：
$breakpoints: ( sm: 576px, md: 768px, lg: 992px );
- 再封装：
@mixin respond-to($breakpoint) { @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } } - 使用：
@include respond-to(md) { ... }—— 修改$breakpoints就自动同步所有地方
自定义函数里最容易忽略的单位处理
Sass 对单位敏感，16px + 2 会报错，16px + 2px 才合法。但函数参数未必带单位，比如你想传 16 表示像素值，就得手动补单位。
这不是语法糖问题，而是类型安全机制：Sass 会区分纯数字、带单位数值、字符串。混用会导致编译失败或隐式转换出错（比如 16 / 2rem 算出来是 8px，但你本意可能是 8rem）。
- 函数内用
unitless($val)判断是否无单位，再用#{ $val }px强制转（仅当确定上下文是像素时） - 更稳妥的做法是约定参数带单位，比如
@function spacing($multiplier: 1em)，让调用者负责单位语义 - 不要依赖
inspect()调试函数返回值 —— 它返回字符串，不能参与后续计算
Sass 函数的价值不在炫技，而在于把重复、易错、分散的样式逻辑收束到可验证、可追踪的一处。真正难的是定义清楚「哪些该抽成函数」——颜色变换、单位换算、映射取值值得做，但把 display: flex 包一层叫 flex-layout() 就反而增加认知负担。
