使用SASS的@each循环结合父选择器&与@include失效问题求助

问题分析 #

你当前的@each循环失效，核心原因是动态调用命名空间下的混合宏时，SCSS无法直接解析msc.#{$color}-square这种插值写法，需要遵循Sass的动态调用语法规范。

解决方案 #

下面提供两种可行的修复方式：

方案1：兼容所有Sass版本的call()函数写法

使用get-function获取命名空间内的混合宏引用，再通过call()执行：

$colors: (orange, pink, blue);

@each $color in $colors {
  &-#{$color}-square {
    @include call(get-function("#{$color}-square", msc));
  }
}

• get-function("#{$color}-square", msc)：从msc命名空间中取出对应颜色的混合宏
• call()：执行获取到的混合宏

方案2：Dart Sass 1.23+ 直接插值调用（更简洁）

如果你的项目使用的是较新版本的Dart Sass，可以直接在混合宏调用后加括号，让SCSS明确识别这是混合宏调用：

$colors: (orange, pink, blue);

@each $color in $colors {
  &-#{$color}-square {
    @include msc.#{$color}-square();
  }
}

额外检查点 #

• 确认msc命名空间已正确定义，且每个颜色对应的混合宏（如msc.blue-square）都存在
• 若使用旧版LibSass，优先选择方案1，因为旧版本不支持方案2的直接插值写法

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