Sass函数可封装响应式断点逻辑，通过$breakpoints map和breakpoint($name)函数实现复用与集中配置，避免硬编码；需注意单位灵活性、编译期求值特性及if()与@if的语义区别。
怎么用Sass函数封装重复的响应式断点逻辑
直接写 @media (min-width: 768px) 多次，后期改断点值要满项目搜，还容易漏。Sass函数能把它变成可复用、可配置的逻辑。
核心是定义一个 breakpoint() 函数，配合 $breakpoints map 管理所有断点名称和值：
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@function breakpoint($name) {
@if map-has-key($breakpoints, $name) {
@return map-get($breakpoints, $name);
} @else {
@warn "Unknown breakpoint: #{$name}.";
@return null;
}
}
使用时：@media (min-width: breakpoint(md)) { ... }。改一个 $breakpoints 就全局生效。
- 别在函数里硬编码单位（比如写死
px），否则无法支持rem或em断点 - 如果项目要兼容 IE，注意
@media查询本身不支持变量，所以breakpoint()必须在编译期求值——这没问题，Sass 做得到 - 函数返回
null时，@media会编译成无效规则，浏览器忽略，但控制台不会报错，容易误以为生效了
Sass中if()函数不能替代@if指令的原因
if($cond, $a, $b) 是表达式函数，只能返回值；而 @if 是控制流指令，能决定是否生成某段 CSS 规则。混淆这两者，会导致“逻辑写了但没生效”。
立即学习“前端免费学习笔记（深入）”；
典型错误：想根据主题切换整个组件颜色体系，却用 if() 去控制 background-color 的值：
// ❌ 错误：只换了一个值，无法删掉整套 light/dark 专属样式
.component {
background-color: if($theme == 'dark', #111, #fff);
color: if($theme == 'dark', #eee, #333);
}
正确做法是用 @if 分支生成不同规则块：
@mixin theme-styles {
@if $theme == 'dark' {
.component {
background-color: #111;
color: #eee;
border: 1px solid #333;
}
} @else {
.component {
background-color: #fff;
color: #333;
border: 1px solid #ddd;
}
}
}
-
if()适合单值计算（如颜色明度调整、间距缩放），不适合结构分支 -
@if支持嵌套和@else if，但注意深度太深会让 mixin 难维护 - 如果主题变量来自外部（如 CSS 自定义属性），Sass 编译时不可知，此时
@if完全失效——得换 CSS Houdini 或 JS 控制
为什么lighten()和darken()在深色背景上容易失真
这两个函数基于 HSL 色彩空间做亮度偏移，对浅色有效，但对接近黑色的色值（如 #121212）再 darken($color, 10%)，结果几乎不变，人眼无法分辨差异。
更严重的是：当原始色饱和度很低时，lighten() 可能让颜色发灰甚至偏棕，因为 HSL 的 L 通道调整会挤压 S（饱和度）空间。
- 优先用
mix($color, $base, $weight)替代，比如mix(#000, $primary, 15%)更可控 - 对深色主题，建议建立独立的调色板变量（
$dark-bg,$dark-surface），而不是靠函数推导 - Sass 3.5+ 提供了
adjust-color()，可以同时调$lightness和$saturation，比单独darken()更稳
用@function实现CSS自定义属性 fallback 降级
CSS 自定义属性在不支持的浏览器里会直接失效，而 Sass 编译时又拿不到运行时值。折中方案是：用函数生成带 fallback 的声明，兼顾现代语法与旧浏览器兼容性。
例如生成 color: var(--text-primary, #333); 这样的双声明：
@function css-var($name, $fallback) {
@return "var(#{$name}, #{$fallback})";
}
.text {
color: #{css-var('--text-primary', '#333')};
}
注意这里用了字符串插值 #{...}，否则 css-var() 返回的是字符串字面量，不是实际值。
- 这个技巧只适用于静态 fallback；动态计算（如根据主题算 fallback）仍需靠
@if+ 多重声明 - 不要试图用函数生成整个
var(--x) !important，Sass 不解析 CSS 优先级语义，!会被当普通字符处理 - 若项目已用 PostCSS，更推荐用
postcss-custom-properties插件自动补 fallback，比 Sass 层面硬写更可靠
