在 Sass 中，& 是一个特殊的标识符，用于引用父选择器。它通常在嵌套规则中使用，以便引用上一层的选择器。以下是一些使用 & 的基本示例：

1. 基本用法
// 基本用法
.button {
  background-color: #3498db;

  &:hover {
    background-color: #2980b9;
  }
}

在这个例子中，&:hover 引用的是 .button，生成的 CSS 将是 .button:hover。

2. 多层嵌套
// 多层嵌套
nav {
  background-color: #333;

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

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

      a {
        color: white;

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

在这个例子中，&:hover 引用的是 a，生成的 CSS 将是 nav ul li a:hover。

3. 使用在属性中
// 使用在属性中
button {
  &.primary {
    background-color: #3498db;
    color: white;
  }

  &.secondary {
    background-color: #95a5a6;
    color: black;
  }
}

在这个例子中，&.primary 引用的是 .button.primary，生成的 CSS 将是 .button.primary。

& 的使用使得可以更方便地生成具有上下文关系的选择器，增加了样式表的灵活性。但请注意，过度使用 & 可能会导致生成的 CSS 规则变得过于具体，可能不利于维护。保持适度的使用，根据具体情况考虑是否使用 &。


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