如何在SCSS中创建自定义指令？对标Tailwind的@tailwind指令

SCSS本身并没有原生支持创建像Tailwind的@tailwind那样的自定义顶级指令，但可以通过两种方式实现类似的功能：

1. 使用SCSS混合宏（Mixin）模拟 #

如果你的需求是快速复用一段样式或导入预设代码，完全可以用SCSS原生的@mixin定义逻辑，再通过@include调用，效果接近自定义指令：

// 定义自定义的复用逻辑
@mixin custom {
  // 直接插入预设样式
  .custom-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  // 也可以导入外部样式文件
  @import './custom-components.scss';
}

// 使用时如同调用自定义指令
@include custom;

这种方式无需额外工具，完全基于SCSS原生语法，适合大多数简单复用场景。

2. 通过PostCSS插件扩展（实现真正的顶级指令） #

如果想要完全复刻@tailwind那种顶级指令的使用体验，需要借助PostCSS自定义插件，将其集成到SCSS的编译流程中：

1. 编写一个简单的PostCSS插件识别@custom指令，并替换为你需要的内容：

// postcss-custom-directive.js
module.exports = () => ({
  postcssPlugin: 'postcss-custom-directive',
  AtRule: {
    custom(atRule) {
      // 将@custom替换为预设的导入语句或样式代码
      atRule.replaceWith({
        type: 'import',
        params: "'./custom-global-styles.scss'"
      });
    }
  }
});

2. 在你的构建配置（如Webpack、Vite）中，将该插件加入PostCSS流程，确保它在SCSS编译前执行。

这种方式能实现和@tailwind几乎一致的使用体验，但需要额外配置PostCSS工具链。

需要注意的是，SCSS原生语法没有自定义顶级指令的官方支持，因此第一种混合宏方案是最通用、无依赖的选择，第二种则适合追求极致指令体验的场景。

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