CSS 框架 词条目录
前端Wiki/词条/Sass 函数

Sass 函数

定义Sass 中带返回值的可复用逻辑,用于计算颜色、间距等令牌派生值,与 mixin 各司其职

函数用 @function 定义、@return 返回,调用时像内建函数一样直接写名字(darken($c, 10%)、lighten($c, 5%))。它最常见的用途是派生设计令牌:由主色派生悬停色与禁用色、由基准间距派生整套倍数、由断点参与布局计算,一份源令牌自动生成完整色板与尺度体系,修改只需改最上游的一处。

与 mixin 的界线要记牢:函数返回值,mixin 返回样式。需要数字、颜色、字符串参与表达式时用函数(padding: space(2));需要输出一串声明时用 mixin。Sass 内建的颜色函数家族(mix、rgba、scale-color、adjust-hue 等)本身就覆盖了绝大多数派生需求,动手造函数之前先翻一遍文档。

HTML
<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>
⚠ 常见误区
🔗 相关词条Sass设计令牌
← 返回来源章节Sass