避免使用 SCSS 和 Vue 3 进行 v-deep 重复

Question

Vue 3 不推荐使用v-deep组合器：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

我们有使用 SCSS 的现有代码，v-deep如下所示：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

编译成这样的东西：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

在 Vue 3 中，这种语法已被弃用，我们需要这样做：

.class {
  ::v-deep(.child-class1) {...}
  ::v-deep(.child-class2) {...}
}

我们必须v-deep对每个嵌套规则重复。事实上，还有更多且复杂的规则。

在 SCSS 中是否有任何方法可以构造一个嵌套块，其中所有内部规则都包装到此::v-deep(...)语法中？

---

我正在寻找类似的东西（不是实际的语法）：

::v-deep(&) {
  .child-class1 {...}
  .child-class2 {...}
}

除了自选择器 ( &) 具有相反的含义之外，它引用子选择器而不是父选择器。

Answer 1

您可以使用空选择器参数执行几乎相同的操作：

.class ::v-deep() {
  .child-class1 {...}
  .child-class2 {...}
}