& 符号在 sass 里是表示「对父元素的引用」

通常的用法有：

上一级元素的一种状态

1
2
3

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

*a 元素在 hoverd 状态下显示 下划线

1
2
3
4
5

a {
	&:first-child {
		color: blue;
	}
}

*父级元素下的第一个子元素

上一级元素有多个类名

1
2
3
4

a {
	&.active { color: red; }
	&.inactive { color: blue; }
}

*active 类名下显示红色字体，inactive 类名下显示蓝色字段

指定上级元素应该插入的位置

1
2
3

a {
	body.mobile & { color: yellow; }
}

会编译为

1

body.mobile a { color: yellow; }

这个用法比较特殊：是在下级选择器的书写范围内去选择上级

可以用在子组件与上级组件的样式需要配合的情况下