如何使用CSS新`part`语法创建Mixin且无需修改HTML与JS？

我希望将多条CSS规则应用到不同选择器，且不创建额外选择器。在SCSS中，这类需求通常通过mixin实现，示例如下：

@mixin gradient-text {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    350deg,
    var(--dark-blue),
    var(--teal),
    var(--bright-green)
  );
}

网上有许多关于使用CSS apply语法创建原生Mixin的资料，但查询得知：

@apply曾在Chromium中以实验性标志短暂支持，但现已被弃用，转而采用::part()选择器。

查阅CSS ::part()相关文档后发现，使用CSS part似乎必须修改HTML并使用Web Components，而Web Components存在一些问题。

问题： 能否不修改HTML或JS，使用part实现CSS Mixin？

不行，::part()是Web Components专属的样式穿透特性，它的设计逻辑依赖两个核心前提：

1. 目标元素必须处于Web Components的Shadow DOM环境中
2. 目标元素需要在HTML里添加part属性来标记可被外部样式控制的节点

这两个条件都要求修改HTML结构或通过JS创建Web Components，所以完全不改动HTML和JS的情况下，根本没法用::part()实现类似SCSS mixin的多规则复用效果。

如果想要用原生CSS实现样式复用，目前更实用的方案有：

• CSS变量复用：把单个属性值抽成变量，在多个选择器中引用，但无法直接复用多属性的规则块
• CSS嵌套：利用主流浏览器已支持的嵌套语法，减少重复选择器的书写，但仍需在每个目标选择器下编写嵌套代码
• 保留预处理器：继续使用SCSS这类预处理器的mixin功能，编译后输出常规CSS即可

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