Sass传递Map给函数报错无效CSS值，期望进入map分支求排查

让我来帮你排查问题——你的代码问题出在可变参数$props...的特性上，我来一步步拆解：

问题根源 #

当你在函数中使用$props...这种可变参数语法时，Sass会把所有传入的参数打包成一个列表（list）。哪怕你只传入了一个map(color: red)，$props的值也不是这个map本身，而是一个包含该map的列表（也就是[(color: red)]）。

所以你的is-map($props)判断的是这个列表的类型，结果自然是false，函数就进入了else分支，返回了这个列表。把列表[(color: red)]作为CSScolor属性的值，当然会报错——因为这不是有效的CSS语法。

两种修复方案 #

方案一：适配可变参数场景（支持多参数）

如果你确实需要函数接收多个参数，可以修改判断逻辑，检查可变参数列表的第一个元素是否为map：

@function is-map($var){ @return type-of($var) == 'map'; }
@function someFunc($props...) { 
  // 先判断列表长度为1，再检查第一个元素是否是map
  @if(length($props) == 1 and is-map(nth($props, 1))) { 
    @return 'map'; 
  } 
  @else { 
    @return $props; 
  }
}
h2 { color: someFunc((color: red)); } // 现在会正确进入if分支返回'map'

方案二：简化参数（仅需单个参数时）

如果你的函数本来就只需要接收单个参数（要么是map，要么是其他值），直接去掉可变参数的...即可：

@function is-map($var){ @return type-of($var) == 'map'; }
@function someFunc($props) { 
  @if(is-map($props)) { @return 'map'; } 
  @else { @return $props; } 
}
h2 { color: someFunc((color: red)); } // 正常进入if分支返回'map'

补充说明 #

• 方案一适合需要处理多参数的场景（比如someFunc(1, 2, 3)这类调用）；
• 方案二更简洁，适合函数仅需单个参数的场景。

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