scss中使用深度选择器

在SCSS中，可以使用深度选择器（也称为嵌套选择器）来选择嵌套层级的元素。深度选择器使用`&`符号表示当前选择器的父级。

以下是一个示例，展示了如何在SCSS中使用深度选择器：

.container {
  background-color: #f5f5f5;
  
  .nested-element {
    color: #333;
    
    & > span {
      font-weight: bold;
    }
  }
  
  .another-nested-element {
    font-style: italic;
    
    &.active {
      color: blue;
    }
  }
}

在上述示例中，我们定义了一个`.container`类选择器，并在其中嵌套了两个元素的选择器：`.nested-element`和`.another-nested-element`。

使用深度选择器，我们可以在`.nested-element`的内部使用`&`来表示`.nested-element`本身，从而生成`.container .nested-element`的样式规则。同样地，我们可以在`.another-nested-element`的内部使用`&`来表示`.another-nested-element`本身，从而生成`.container .another-nested-element`的样式规则。

此外，我们还可以使用深度选择器来进行更复杂的选择。例如，在上述示例中，我们使用了`& > span`来选择`.nested-element`内部直接子元素为`<span>`的规则。

注意，深度选择器`&`只能在嵌套的选择器内部使用。它可以帮助我们编写更简洁和易读的SCSS代码，减少了重复的选择器名称。

当我们将上述SCSS代码编译成CSS时，会生成相应的选择器规则，如下所示：

.container {
  background-color: #f5f5f5;
}
.container .nested-element {
  color: #333;
}
.container .nested-element > span {
  font-weight: bold;
}
.container .another-nested-element {
  font-style: italic;
}
.container .another-nested-element.active {
  color: blue;
}

以上就是在SCSS中使用深度选择器的基本用法。通过嵌套选择器，我们可以更方便地编写出层级结构清晰的样式规则。