Sass通过循环调用名称列表中的mixin时报错 该如何修复？

错误原因 #

Sass原生不支持@include后直接接字符串形式的mixin名，哪怕用插值语法包裹也不会生效，你写的@include nth($tm,1)本质是把字符串'example1'直接传给了@include，不符合语法要求，因此抛出错误。

方案1：编写调度mixin实现调用（全版本兼容） #

你可以额外写一个统一的调度mixin，接收字符串类型的mixin名称和可选参数，内部通过判断匹配对应mixin调用即可：

// 原有mixin定义不变
@mixin example1 {
    width: 50px;
}
@mixin example2 {
    height: 10px;
}

// 新增调度mixin
@mixin callMixin($name) {
  @if $name == 'example1' {
    @include example1();
  } @else if $name == 'example2' {
    @include example2();
  }
  // 后续新增其他mixin只需要在这里加对应判断分支即可
}

$arr : (
    'lg':(
        ('example1','.container header'),
        ('example2','.container nav'),
    ),
    'sm': (
        ('example2','.container header'),
    )
);
// 假设你已经定义了getMedia函数，原有逻辑保持不变，仅修改调用行
@mixin mediaRender($z : 'min' ) {
    @each $ind , $val  in $arr {
        @media (min-width:getMedia($ind)){
            @for $i from 1 through length($val){
               $tm : nth($val,$i);
              #{nth($tm,2)}{
                // 替换为调用调度mixin即可
                @include callMixin(nth($tm,1)); 
               }
            }
        }
    }
}

方案2：Dart Sass 1.53.0+ 动态调用（更灵活） #

如果你使用的是Dart Sass 1.53.0及以上版本，可以直接用官方提供的meta模块的相关方法实现动态调用，不需要额外维护判断分支：

// 首先引入官方内置模块
@use "sass:meta";

// 原有mixin、$arr变量、getMedia函数定义不变
@mixin example1 {
    width: 50px;
}
@mixin example2 {
    height: 10px;
}

$arr : (
    'lg':(
        ('example1','.container header'),
        ('example2','.container nav'),
    ),
    'sm': (
        ('example2','.container header'),
    )
);

@mixin mediaRender($z : 'min' ) {
    @each $ind , $val  in $arr {
        @media (min-width:getMedia($ind)){
            @for $i from 1 through length($val){
               $tm : nth($val,$i);
              #{nth($tm,2)}{
                // 直接通过meta模块动态调用对应mixin
                @include meta.call(meta.get-mixin(nth($tm,1)));
               }
            }
        }
    }
}

如果你的mixin需要传入参数，直接把参数跟在meta.call的第二个及之后的参数位置即可，和普通mixin调用逻辑一致。

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