如何创建可复用SCSS工具混合宏并在组件中正确导入使用？

你遇到的编译错误核心原因是当前使用的Sass相关依赖不支持@use语法——@use是Dart Sass 1.23.0+才引入的模块化语法，旧版Node Sass（LibSass）完全不兼容该语法，导致编译器无法识别utils.spacing的写法，抛出无效CSS的错误。

下面提供两种可行的解决方式：

方案一：用兼容全版本的@import语法（推荐快速解决） #

直接将@use替换为传统的@import，无需调整混合宏的调用方式：

// Card/styles.scss
@import '../utils';

.Card {
  // ... 其他样式
  &--margin-bottom- {
    @include spacing(margin-bottom, 7, 4px);
  }
}

这种写法兼容所有Sass版本，不管是Node Sass还是Dart Sass都能正常编译，适合快速修复问题。

方案二：升级依赖以支持@use模块化语法 #

如果想保留@use的模块化特性（比如命名空间、避免变量污染），需要升级依赖到支持该语法的版本：

1. 卸载旧的Node Sass依赖：

npm uninstall node-sass

2. 安装Dart Sass和适配的sass-loader版本：

npm install sass sass-loader@^10 --save-dev

完成后，你原本的@use写法就能正常工作了，无需修改现有代码。

额外优化：给混合宏添加默认参数 #

可以在utils.scss中给混合宏设置默认参数，提升复用灵活性：

// utils.scss
@mixin spacing($property, $max: 7, $space: 4px) {
  @for $i from 1 to $max + 1 {
    &#{$i}x {
      #{$property}: $i * $space;
    }
  }
}

之后调用时可以省略默认值，比如@include spacing(margin-bottom)就能自动生成1x到7x的margin-bottom类。

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