如何在 SASS 中创建组合子选择器？

在 SASS 中，可以通过组合子选择器来更好地控制网站的样式。下面介绍如何在 SASS 中创建组合子选择器。

基本语法

组合子选择器可以在两个选择器之间添加一个 > 符号来定义子元素的样式。例如：

.container > .box {
  background-color: red;
}

这样就会选择 .container 中的所有直接子元素 .box，并将它们的背景颜色设置为红色。

嵌套选择器

在 SASS 中，可以嵌套选择器来使代码更简洁。例如：

.container {
  > .box {
    background-color: red;
  }
}

这样就可以在 .container 中找到所有直接子元素 .box，并将它们的背景颜色设置为红色。

父元素选择器

在 SASS 中，可以使用 & 符号表示父元素的选择器。例如：

.container {
  > .box {
    &.red {
      background-color: red;
    }
  }
}

这样就可以选择所有 .container 中的直接子元素 .box 并带有 .red 类的元素，并将它们的背景颜色设置为红色。

通用选择器

在 SASS 中，可以使用 * 符号表示通用选择器。例如：

.container {
  > * {
    font-size: 14px;
  }
}

这样就可以选择 .container 中的所有直接子元素并将它们的字体大小设置为 14px。

代码片段

.container {
  > .box {
    &.red {
      background-color: red;
    }
  }
  
  > * {
    font-size: 14px;
  }
}

以上就是如何在 SASS 中创建组合子选择器的详细介绍。