如何通过自定义函数Incl调用SCSS中的Mixin fw以缩短include语句？

当然可以实现这个需求，核心思路是通过别名Mixin或者模块重命名来简化调用步骤，以下是具体实现方式：

方案1：创建别名Mixin #

直接定义一个名为Incl的Mixin，内部转发参数并调用目标Mixin fw，完全兼容原Mixin的所有参数逻辑：

// 假设你的目标Mixin fw是这样的
@mixin fw($weight, $important: false) {
  font-weight: if($important, $weight !important, $weight);
}

// 自定义Incl作为fw的别名Mixin
@mixin Incl($args...) {
  @include fw($args...);
}

// 使用示例
.title {
  @include Incl(700); // 等价于 @include fw(700);
}

.subtitle {
  @include Incl(500, true); // 等价于 @include fw(500, true);
}

这种方式无需额外配置，参数传递灵活，能完美适配fw的可选参数、默认值等所有特性。

方案2：模块化场景下的重命名 #

如果fw Mixin是在独立的模块文件中，可以用@forward指令给它直接设置别名，适合大型项目的模块化管理：

// _typography-mixins.scss（存放fw的模块文件）
@mixin fw($weight) {
  font-weight: $weight;
}

// 在主样式文件中导入并重命名
@forward 'typography-mixins' with (
  @mixin fw as Incl
);

// 使用示例
.card-text {
  @include Incl(400);
}

关键说明 #

• SCSS的@function无法实现这个需求：函数的返回值只能是CSS可识别的数值、字符串、颜色等，不能执行Mixin调用或样式声明，因此必须用Mixin或模块重命名的方式。
• 原生SCSS无法省略@include关键字：语法规则要求调用Mixin必须使用@include，所以没法做到完全去掉这个前缀，只能通过缩短Mixin名称来减少代码量。

内容的提问来源于stack exchange，提问作者Nguyễn Triệu Cẩn