如何在SCSS中正确使用Vue ::v-slotted的嵌套语法？

问题背景 #

原生写法可以正常运行的代码：

::v-slotted(.title) {
  margin-top: 0;
}
::v-slotted(.title_icon) {
  position: relative;
  left: 5px;
  top: 20px;
}

现在需要用SCSS语法实现相同效果，先后尝试的两种写法均存在问题。

两种踩坑实现 #

1. 直接在现有v-slotted选择器内部嵌套做类名拼接，触发编译错误：

   ::v-slotted(.title) {
     margin-top: 0;
   
     &_icon {
       position: relative;
       left: 5px;
       top: 20px;
     }
   }
   

2. 在嵌套内部重新声明v-slotted伪类，将&拼接的内容传入伪类参数，编译通过但样式完全不生效：

   ::v-slotted(.title) {
     margin-top: 0;
   
     ::v-slotted(&_icon) {
       position: relative;
       left: 5px;
       top: 20px;
     }
   }
   

两种错误的本质原因：

• 第一种写法中，SCSS会将&_icon直接拼接在当前父选择器后，最终生成的选择器是::v-slotted(.title)_icon，类名后缀拼到了伪类结构外侧，完全不符合语法规则，触发编译报错
• 第二种写法中，SCSS会生成两层嵌套的选择器结构：::v-slotted(.title) ::v-slotted(.title_icon)，对应匹配插槽内嵌套在.title元素内部的.title_icon元素，和预期的单层匹配目标不符，因此样式无法生效。

正确实现方案 #

::v-slotted()是Vue专属的插槽作用域伪类函数，结构上要求伪类和传入的选择器参数形成完整的独立匹配单元，不能直接借用SCSS嵌套上下文在伪类外侧拼接类名。正确的SCSS写法如下：

::v-slotted {
  &(.title) {
    margin-top: 0;
  }
  &(.title_icon) {
    position: relative;
    left: 5px;
    top: 20px;
  }
}

这种写法会将SCSS的&替换为上层的::v-slotted伪类，最终生成::v-slotted(.title)、::v-slotted(.title_icon)两个和原生手写完全一致的选择器，既符合Vue对v-slotted语法的解析要求，也能利用SCSS嵌套减少重复代码，不会触发编译错误或样式失效问题。

内容的提问来源于stack exchange，提问作者Kevin W.