Sass 的 & 符号（ampersands）

重复声明

有时您须要击败第三方 CSS 库的声明来获取样式的全部权：

.parent.parent {}

这种方式比使用和 ID，内联样式或！important的压倒性弱，而且它可能比使用任意父元素限定选择器有好处。 声明的权重不是基于选择器的上下文引起的，而是仅由其自身引起。 使用＆你能够作一样的事情。

.parent {
  &#{&} { }
}

这里须要用 插值括号#{}，由于两个相邻的＆符号在 Sass 中是无效的。

注：#{&}会表示整个路径，上面的方法没法用在嵌套的结构里

.parent1 {
  .parent2 { 
    &#{&} {
      font-size: 12px;
    }
  }
}

// 结果
.parent1 .parent2.parent1 .parent2 {
    font-size: 12px;
}

参见

The Sass Ampersand | CSS-Tricks