函数用 @function 定义、@return 返回,调用时像内建函数一样直接写名字(darken($c, 10%)、lighten($c, 5%))。它最常见的用途是派生设计令牌:由主色派生悬停色与禁用色、由基准间距派生整套倍数、由断点参与布局计算,一份源令牌自动生成完整色板与尺度体系,修改只需改最上游的一处。
与 mixin 的界线要记牢:函数返回值,mixin 返回样式。需要数字、颜色、字符串参与表达式时用函数(padding: space(2));需要输出一串声明时用 mixin。Sass 内建的颜色函数家族(mix、rgba、scale-color、adjust-hue 等)本身就覆盖了绝大多数派生需求,动手造函数之前先翻一遍文档。
<style> /* Sass 源码: $base: 8px; @function space($n) { @return $base * $n; } .box { padding: space(2); } —— 编译后的纯 CSS: */ .box { padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; } </style> <div class="box">spacing 函数 space(2) = 16px</div>