scss deep写法

SCSS的深度选择器可以通过使用`&`符号来实现。它允许你在嵌套的选择器中引用父级选择器。下面是一个示例，展示了如何使用深度选择器：

.parent {
  color: blue;

  & .child {
    font-weight: bold;
  }

  & > .sibling {
    text-decoration: underline;
  }

  &.active {
    background-color: yellow;
  }
}

在上面的示例中，`&`符号用来引用父级选择器。`.child`选择器将会匹配到`parent`类下的所有`.child`元素，`.sibling`选择器将会匹配到直接子元素且类名为`sibling`的元素，`.active`选择器将会匹配到类名为`parent active`的元素。

希望这个例子能帮到你！如果你有更多的问题，请随时提问。

相关问题

scss 如何使用deep

在SCSS中，`&`符号用于引用父选择器，但无法直接用于选择器的嵌套子元素。为了解决这个问题，SCSS提供了`::deep`关键字，它允许你在嵌套选择器中使用父选择器。

以下是使用`::deep`关键字的示例：

.parent {
  color: red;

  &::after {
    content: "Parent";
  }

  ::deep .child {
    color: blue;
    // 修改父级样式
    &::after {
      content: "Child";
      color: green;
    }
  }
}

在上面的示例中，`.parent`选择器是顶层的父级选择器。使用`&::after`可以直接修改`.parent`元素的样式。而`.child`选择器是嵌套在`.parent`中的子选择器，通过使用`::deep`关键字，我们可以修改`.parent`元素下所有的`.child`元素的样式。

需要注意的是，`::deep`关键字在最新的CSS规范中被弃用，不再被推荐使用。这是因为它引入了样式穿透的问题，降低了样式的可维护性。如果可能的话，建议使用其他方式来实现需要的样式效果。

/deep/ scss

在Vue中，/deep/是深度作用选择器的简写形式，用于对子组件中的样式进行选择。它在Vue2.x版本中可用，但在Vue3.x版本中会报错。/deep/可以应用于CSS，但不支持CSS预加载器（如less或scss）。

举例来说，如果你想在scoped的scss样式中修改子组件的样式，你可以使用/deep/来实现。比如，你可以这样写/scoped/:

<style scoped lang="scss">
/deep/ .position-el-steps {
  /deep/ .el-step.is-vertical {
    /deep/ .el-step__description {
      margin-top: -20px;
    }
  }
}
</style>

这样就能够选择到子组件中的相应元素，并对其应用样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [scss中使用/deep/深度选择器报错的解决办法](https://blog.csdn.net/weixin_44900104/article/details/126164236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [【脸脸酱】css /deep/ 深度选择器的用法（在scoped文件修改外部组件样式）](https://blog.csdn.net/qq_42557882/article/details/106871329)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [解决vue scoped scss 无效的问题](https://download.csdn.net/download/weixin_38706603/13126415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]