构建 Sass 自定义函数：实现无法预定义的实用工具

从数学转换到字符串处理，创建可复用的自定义 Sass 函数扩展官方能力。 · 难度：入门 · +10XP

构建 Sass 自定义函数：实现无法预定义的实用工具

本课聚焦 @function 的高级用法：创建单位转换函数（px 转 rem 带基准）、字符串处理（驼峰转连字符）、列表操作（提取中位数或众数）、以及颜色计算（根据亮度自动选择文本色）。讲解函数参数验证（@warn、@error）、递归函数（分解质因数）以及函数作为混入参数的回调模式。最终提供一个可复用的函数工具库。

@function px-to-rem($px, $base: 16px) {
  @if unit($px) != 'px' {
    @error '参数必须带 px 单位';
  }
  @return math.div($px, $base) * 1rem;
}
@function text-contrast($bg) {
  $luminance: (0.299 * red($bg) + 0.587 * green($bg) + 0.114 * blue($bg)) / 255;
  @return if($luminance > 0.5, #000, #fff);
}
@function kebab-case($str) {
  @return to-lower-case(#{$str}); // 简化演示
}
body {
  background: #3498db;
  color: text-contrast(#3498db);
}