在 Sass 中，你可以使用嵌套语法来编写群组选择器，以更清晰地组织和表示相关样式。以下是一些关于群组选择器嵌套的基本示例：

1. 基本群组选择器嵌套
// 基本群组选择器嵌套
h1, h2, h3 {
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
}

p, li, span {
  font-size: 16px;
}

在这个例子中，h1, h2, h3 和 p, li, span 都被嵌套在一个选择器块内，使得样式更加紧凑。

2. 嵌套中的群组选择器
// 嵌套中的群组选择器
nav {
  background-color: #333;

  ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

在这个例子中，ul, ol 被嵌套在 nav 的选择器块内，使得它们共享相同的样式规则。

3. 带有伪类的群组选择器嵌套
// 带有伪类的群组选择器嵌套
a {
  color: #3498db;

  &:hover, &:focus {
    text-decoration: underline;
  }

  &:visited {
    color: #34495e;
  }
}

在这个例子中，&:hover, &:focus 被嵌套在 a 的选择器块内，表示它们都应用于 a 元素。

通过使用群组选择器的嵌套，你可以更清晰地表示样式规则的关联性，提高样式表的可读性。然而，要注意不要滥用嵌套，避免生成过于复杂和深层次的选择器，以保持样式表的易维护性。


转载请注明出处：http://www.zyzy.cn/article/detail/4326/sass