如何在Sass函数中按参数指定运算类型以避免代码重复？

嘿，我完全懂你想要的效果——根据参数灵活切换索引的增减操作，同时避免冗余的分支代码，还尽量贴合函数式编程的思路对吧？先给你指出当前代码的一个核心问题：你用了字符串插值#{}来拼接运算符号，这会让函数返回字符串类型，而不是我们需要的数值类型，这就是为什么type-of(mathOperation(5, sum))会输出string，没法直接用来做后续的索引计算。

下面给你两种符合需求的实现方式，从简洁到函数式拓展性强的都有：

方案一：函数式映射表（推荐，拓展性拉满） #

这种方式把运算逻辑抽象成独立的函数单元，存储在映射表中，完全符合函数式编程的“把操作作为数据”的思路，以后要加新的运算类型（比如跳2步），直接在映射表里加就行，不用修改函数主体：

// 定义运算映射：键是操作方向，值是对应的运算函数
$index-operations: (
  next: function($n) { @return $n + 1; },
  prev: function($n) { @return $n - 1; }
);

@function adjust-index($current-index, $direction) {
  // 先做参数合法性校验，避免非法输入
  @if not map-has-key($index-operations, $direction) {
    @error "Invalid direction '#{$direction}'. Allowed values: 'next', 'prev'.";
  }
  
  // 取出对应的运算函数并执行
  $operation: map-get($index-operations, $direction);
  @return call($operation, $current-index);
}

// 测试用例
@debug adjust-index(5, next); // 输出 6（数值类型）
@debug adjust-index(5, prev); // 输出 4（数值类型）
@debug type-of(adjust-index(5, next)); // 输出 number

为什么这个方案好？ #

• 完全遵循函数式编程的抽象原则，运算逻辑和函数主体解耦
• 语义化极强：函数名adjust-index、参数$direction（next/prev）比原来的mathOperation、$type更贴合“列表索引切换”的业务场景
• 拓展成本极低：如果以后需要实现next-2（跳2个索引），只需要在$index-operations里加一行next-2: function($n) { @return $n + 2; }就行

方案二：简洁分支判断（适合仅需两种操作的场景） #

如果你的需求只局限于“上一个/下一个”索引，不需要后续拓展，这个简洁版本也够用，同样避免了冗余代码（而且直接返回数值）：

@function adjust-index($current-index, $direction) {
  @return $current-index + if($direction == next, 1, -1);
}

// 测试用例
@debug adjust-index(5, next); // 6
@debug adjust-index(5, prev); // 4
@debug type-of(adjust-index(5, next)); // number

这里用了if()函数的返回值直接参与数值运算，而不是拼接字符串，所以得到的是正确的数值类型。如果需要参数校验，也可以加个@if判断抛出错误。

再回头看你的原代码 #

原代码里的#{if($type == sum, '+', '-')} 1是把运算符号转成字符串拼接，最终返回的是"5+1"这样的字符串，Sass不会自动解析这个字符串为数值运算，所以这是导致类型错误的核心原因——我们需要直接进行数值运算，而不是拼接运算表达式的字符串。

内容的提问来源于stack exchange，提问作者aalvarado