如何在SCSS中实现Less里&:global(.static_classname)的等效效果？

Less原代码及编译结果 #

以下是Less代码：

.design {
  &:global(.ant-input-number) {
    color: #2a2f3c;
    font-weight: 600;
    font-size: 14px;
    font-family: DIN Alternate, serif;
    line-height: 16px;
    border: 1px solid rgba(188, 193, 205, 0.5);
    border-radius: 4px;
  }
}

编译后生成的CSS（CSS Modules环境下，.design会被添加哈希后缀）：

.design___3dNL4.ant-input-number {
    color: #2a2f3c;
    font-weight: 600;
    font-size: 14px;
    font-family: DIN Alternate,serif;
    line-height: 16px;
    border: 1px solid rgba(188,193,205,.5);
    border-radius: 4px;
}

需求与问题 #

需要在SCSS中实现上述相同的编译效果——让本地作用域的类（如.design/.customTabLayout）与全局类（如.ant-input-number/.ant-tabs-small）生成类名组合的选择器。但尝试以下两种写法均无效：

写法1：

.customTabLayout:global(.ant-tabs-small){
   /* 样式内容 */
}

写法2：

.customTabLayout{
  &:global(.ant-tabs-small){
    /* 样式内容 */
  }
}

正确的SCSS写法 #

在CSS Modules环境下，SCSS中实现该效果的正确写法是去掉&，直接在父选择器内部使用:global()包裹全局类名：

针对.design的例子：

.design {
  :global(.ant-input-number) {
    color: #2a2f3c;
    font-weight: 600;
    font-size: 14px;
    font-family: DIN Alternate, serif;
    line-height: 16px;
    border: 1px solid rgba(188, 193, 205, 0.5);
    border-radius: 4px;
  }
}

针对你测试的.customTabLayout例子：

.customTabLayout {
  :global(.ant-tabs-small) {
    /* 样式内容 */
  }
}

为什么之前的写法无效？ #

• 写法1中，:global直接跟在.customTabLayout后，会被解析为类似伪类的结构，无法生成类名组合的选择器；
• 写法2中添加了&，会让编译后的选择器变成.customTabLayout___xxx:global(.ant-tabs-small)，这是父类与全局类的嵌套结构，而非类名拼接，不符合需求。

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