如何在SCSS中对同类Mixin进行分组？现有尝试方案无效

你想要的css.OS.windowmixin()这种层级调用方式，@group仅用于文档分类，无法实现代码层级调用；常规嵌套Mixin的写法也不适用，正确的实现方式有两种，按需选择：

方案一：模块化拆分（推荐，符合SCSS最佳实践） #

1. 创建单独的OS模块文件_OS.scss，存放相关Mixin：

// _OS.scss
@mixin windowmixin() {
  // 这里写入OS窗口布局规则
  .os-window {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background-color: #ffffff;
    border-radius: 6px;
    padding: 12px;
  }
}

2. 在主规则文件rules.scss中，用@forward给OS模块的成员添加命名空间前缀：

// rules.scss
// 将_OS.scss的所有成员以OS.为前缀导出
@forward './OS' as OS.*;

// 其他全局Mixin可以继续写在这里
@mixin global-mixin() {
  // 全局通用样式规则
}

3. 主文件中调用方式完全符合你的需求：

@use './rules.scss' as css;

// 直接通过分组命名空间调用Mixin
@include css.OS.windowmixin();

方案二：单文件内模拟分组（不推荐，不利于维护） #

如果不想拆分文件，可以用SCSS的变量存储Mixin引用，模拟层级结构：

// rules.scss
@mixin _OS-windowmixin() {
  // OS窗口布局规则
}

// 定义分组对象
$OS: (
  windowmixin: get-function('_OS-windowmixin')
);

// 封装一个用于调用分组内Mixin的通用Mixin
@mixin call($group, $mixin, $args...) {
  @include call(get-map-get($group, $mixin), $args...);
}

主文件调用：

@use './rules.scss' as css;

@include css.call(css.$OS, windowmixin);

这种写法不够直观，仅适合临时小范围使用，长期维护还是推荐方案一。

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