在 Sass 中，你可以使用嵌套规则来表示群组选择器，使代码更清晰。群组选择器是指将多个选择器组合在一起以共享相同的样式规则。

以下是一个使用嵌套规则表示群组选择器的简单示例：
// 使用嵌套规则表示群组选择器
button, input, select {
  margin: 5px;
  padding: 10px;
  font-size: 14px;

  &:hover {
    background-color: #eee;
  }

  &:focus {
    outline: none;
  }
}

在这个例子中，button, input, 和 select 共享相同的样式规则。& 符号用于引用父选择器，生成 button:hover, input:hover, 和 select:hover 以及 button:focus, input:focus, 和 select:focus 这样的样式。

在 Sass 编译成 CSS 时，上述 Sass 代码将被转换为以下 CSS 代码：
button, input, select {
  margin: 5px;
  padding: 10px;
  font-size: 14px;
}

button:hover, input:hover, select:hover {
  background-color: #eee;
}

button:focus, input:focus, select:focus {
  outline: none;
}

通过使用嵌套规则，你可以更清晰地表达群组选择器的结构，减少了样式的冗余和提高了可读性。


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