使用 SCSS 和 Vue 3 避免 v-deep 重复答案

【问题标题】：Avoid v-deep duplication with SCSS and Vue 3使用 SCSS 和 Vue 3 避免 v-deep 重复
【发布时间】：2021-05-16 20:48:46
【问题描述】：

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

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

编译成这样的：

.class[data-xxxxxx] .child-class1 {...}
.class[data-xxxxxx] .child-class2 {...}

在 Vue 3 中，不推荐使用这种语法，我们需要这样做：

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

我们必须为每个嵌套规则重复 v-deep。实际上，还有很多，还有一些复杂的规则。

有什么方法可以在 SCSS 中构造一个嵌套块，将所有内部规则都包装到这个 ::v-deep(...) 语法中？

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

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

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

【问题讨论】：

【解决方案1】：

你可以用一个空的选择器参数做几乎同样的事情：

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

【讨论】：

嗯，这可能解决了某些情况，但它会导致::v-deep(.class) .child-class。我正在寻找.class ::v-deep(.child-class)。抱歉，如果问题不清楚。
我明白了。您可以只使用：.class ::v-deep() { } 和一个空的选择器参数。我更新了答案。
是的，但这与.class ::v-deep() .child-class 不一样。我已经尝试过了，它确实有效，但我担心它的工作原理与已弃用的 class ::v-deep .child-class 组合语法的工作原理相同，并且在删除不推荐使用的功能时它将无法工作。
不，它与使用旧语法时不同，否则会出现弃用警告。它之所以有效，是因为它使用了新语法。
此语法不适用于less：它会抛出“Missing closing ')'”。作为当前的解决方法，我使用的是.class ::v-deep(*)，但它没有得到完全相同的结果。