在 Sass 中,& 符号用作父选择器的标识符。这个符号允许你引用嵌套规则中父级选择器,从而创建更具灵活性的样式。

以下是一个简单的例子:
.button {
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.active {
    background-color: red;
  }
}

在这个例子中,& 符号用于引用父选择器 .button。当 Sass 编译成 CSS 时,& 会被替换为其父选择器,产生如下的 CSS:
.button {
  background-color: blue;
}

.button:hover {
  background-color: darkblue;
}

.button.active {
  background-color: red;
}

这使得你能够以更简洁的方式表示样式,同时确保生成的 CSS 具有合适的层次结构。

& 还可以用于处理复杂的选择器:
.container {
  .item {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

在这个例子中,& 用于引用 .container .item 的父选择器,分别生成 .container .item:first-child 和 .container .item:last-child 两个选择器。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6168/SASS