Sass中如何通过@each循环引入其他文件map中注册的@mixin

嘿，我完全懂你这种需求！有时候就是需要这种动态引入mixin的操作，不用纠结为什么要这么做，我信你肯定有合理的场景😎

你碰到的问题核心在于：当用@use把模块引入为styles后，mixin是属于这个命名空间的，但动态插值的时候，Sass没法直接识别styles.#{$mixin}这种拼接写法——它的解析顺序不支持这种动态的命名空间+变量组合。

解决这个问题的关键是用Sass内置的get-function()和call()函数配合，这俩是专门用来处理这种动态调用mixin/函数的场景的，直接上代码给你看：

首先是你的a.scss（我补全了mixin的定义，方便测试）：

// a.scss
@mixin style-html() {
  html {
    box-sizing: border-box;
  }
}
@mixin style-body() {
  body {
    margin: 0;
  }
}
@mixin style-body-front($margin) {
  .body-front {
    margin: $margin;
  }
}
@mixin style-body-body($size, $color) {
  .body-body {
    font-size: $size;
    color: $color;
  }
}

$styles: (
  style-html: (),
  style-body: (),
  style-body-front: (20px),
  style-body-body: (16px, #333)
);

然后是b.scss的正确写法：

// b.scss
@use 'a' as styles;

@each $mixin-name, $args in styles.$styles {
  // 从styles模块里拿到对应的mixin引用
  $mixin-reference: get-function($mixin-name, $module: styles);
  // 调用mixin，同时展开参数
  @include call($mixin-reference, $args...);
}

给你拆解下为什么这个能行：

• get-function($mixin-name, $module: styles)：这个函数会去styles模块里，精准找到名字和$mixin-name完全匹配的mixin，返回一个可以被调用的"引用"
• @include call($mixin-reference, $args...)：call()函数可以接收这个mixin引用，然后用$args...把map里存的参数展开，效果和你手动写@include styles.style-body-front(20px);完全一样

再说说你之前试的几种写法为啥不行：

• @include styles.#{$mixin}($args...)：Sass的解析器会先处理styles.，然后把后面的插值内容当成独立的片段，没法组合成一个完整的命名空间mixin名，所以会报"Expected identifier"错误
• @include #{styles.$mixin}($args...)：这种写法语法本身就有问题，styles.$mixin是在引用变量，插值后得到的是变量的值，而不是mixin的引用，自然没法调用

只要你的Sass版本是3.5及以上（现在大部分项目用的版本都满足），这个方法就完全没问题，亲测有效！

内容来源于stack exchange