SCSS中如何向@extend引用的%占位符选择器传递参数

SCSS 原生的占位符选择器（%开头的选择器）没有直接接收参数的语法能力，但结合你当前所有代码都封装在同一个 mixin 内的结构限制，完全可以借助 mixin 作用域变量实现和「向占位符传参」完全一致的效果，不需要额外定义新的带参数 mixin。

定义在 mixin 内部的占位符，可以直接访问外层 mixin 接收的入参、以及 mixin 内定义的局部变量，不需要给占位符单独传参。当你调用外层 mixin 传入不同参数时，占位符内的计算逻辑会自动读取当前作用域的变量值，配合@extend的选择符合并规则，就能批量给多个选择器应用基于参数计算的公共样式。

@mixin imageSize($theme) {
  // 可基于传入的$theme提前计算公共变量，内部占位符可直接读取
  $img-w: map-get($theme, width);
  $img-h: map-get($theme, height);
  $img-object-fit: map-get($theme, fit);

  .someClass {
    @extend %ImgSize;
    // 此处写.someClass独有的样式
  }

  .someClass2 {
    @extend %ImgSize;
    // 此处写.someClass2独有的样式
  }

  %ImgSize {
    // 直接使用当前作用域的参数/变量做计算，无需单独传参
    width: $img-w;
    height: $img-h;
    object-fit: $img-object-fit;
    // 其他公共样式逻辑
  }
}

// 调用示例：传入不同参数即可批量生成对应样式
@include imageSize((width: 100px, height: 100px, fit: cover));
@include imageSize((width: 240px, height: 160px, fit: contain));

• 定义在 mixin 内部的占位符作用域完全隔离在当前 mixin 的调用上下文内，不会造成全局样式污染
• 同一次 mixin 调用中，所有@extend %ImgSize的选择器会被自动合并公共样式，不会产生重复代码
• 所有逻辑都封装在你原有的imageSize mixin 内部，完全符合你不能额外定义新带参 mixin 的限制

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