父选择器标识符&

背景概述

一般情况下,sass 在解开一个嵌套规则时就会把父选择器通过一个空格连接到子选择器的前边。这种在CSS里边被称为后代选择器,但在有些情况下你却不会希望 sass 使用这种后代选择器的方式生成样式。

如 : 当您为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接。下面这种情况sass就无法正常工作:

#test-box a{
    color:#000000;
    :hover{color: #FF0000;}
}  

生成的样式中 a :hover 中间的空格将伪类选择器变成了后代选择器,无法达到我们的实际目的。

解决办法

使用一个特殊的 sass 选择器,即父选择器 &。

#test-box a{
    color:#000000;
    &:hover{color: #FF0000;}
}

编译后样式为 a:hover 中间的空格被去除。