sass使用/deep/

/deep/是一个CSS选择器，它可以使得样式穿透到子组件中。但是像Sass这样的预处理器无法正确解析/deep/选择器，因此可以使用/>>>或者::v-deep来代替/deep/选择器。下面是/deep/选择器的使用方法和替代方法的示例：

使用/deep/选择器：

<style scoped lang="scss">
.parent /deep/ .child {
  color: red;
}
</style>

使用/>>>选择器：

<style scoped lang="scss">
.parent >>> .child {
  color: red;
}
</style>

使用::v-deep选择器：

<style scoped lang="scss">
.parent ::v-deep .child {
  color: red;
}
</style>

相关问题

sass 中使用/deep/报错

在Sass中使用/deep/可能会导致编译错误，因为它是旧版本的CSS规范，而新版本的CSS规范中已经不再支持/deep/。可以使用::v-deep代替/deep/，以避免编译错误。下面是使用::v-deep的示例代码：

.main_wrapper 
  padding: 0 53px 
  position: relative 
  top: -20px 
  ::v-deep .el-tabs__item 
    height: 30px 
    line-height: 30px 
    color: #fff!important 

vue文件中&/deep/怎么使用

`&` 符号用于在 Sass 中表示父元素选择器，而 `/deep/` 则是针对 Vue 组件中的样式穿透。

在 Vue 组件中，如果在子组件中设置了样式，父组件是无法直接覆盖子组件的样式的。这时就需要使用 `/deep/` 进行样式穿透。

例如，如果你想在父组件中修改子组件中的某个元素的样式，可以这样写：

/* 父组件样式 */
/deep/ .child-class {
  color: red;
}

这样，父组件就可以修改子组件中的 `.child-class` 样式了。

而 `&` 符号则可以用于表示父元素选择器。例如：

/* 父组件样式 */
.parent-class {
  & .child-class {
    color: red;
  }
}

这样，父组件中的 `.child-class` 样式就只作用于 `.parent-class` 内部的元素了。