Sass混入调用报错：Ordinal参数必须位于命名参数之前

错误原因 #

报错的核心问题是：你在调用混入时，把多个独立的值（比如第二个径向渐变、第二个背景位置）当成了无参数名的位置参数，放在了命名参数（如$background-image:、$background-color:）之后。Sass语法明确要求：所有位置参数必须放在命名参数之前，不能在命名参数后再出现无参数名的位置参数。

你的代码里，$background-image: radial-gradient(...)之后直接写了第二个radial-gradient(...)，这会被Sass识别为新的位置参数；同理$background-position: 0 0之后的50px 50px也被当成了位置参数，这就违反了语法规则。

解决方法 #

把需要多值的参数（比如多背景图、多背景位置）作为一个整体传给对应的命名参数，用逗号分隔多个值即可。同时注意去掉第二个渐变末尾多余的逗号，避免语法错误。

正确调用代码示例

@include fancy-container(
  $background-color: $primary,
  $background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#fafafa 20%, transparent 20%),
  $background-position: 0 0, 50px 50px,
  $background-size: 100px 100px
);

可选写法（用括号包裹多值，不影响效果）

@include fancy-container(
  $background-color: $primary,
  $background-image: (radial-gradient(#212121 20%, transparent 20%), radial-gradient(#fafafa 20%, transparent 20%)),
  $background-position: (0 0, 50px 50px),
  $background-size: 100px 100px
);

这样修改后，所有参数都是命名参数，不存在位置参数跟在命名参数后的情况，符合Sass语法规则，同时能正确生成你需要的多背景CSS效果。

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