親セレクタの参照

cssスプライトなどで可変するナビゲーションアイコンを
コーディングする時などに『li a:hover{~}』,『li a:link{~}』などと
同じセレクタを繰り返し記述すると可読性が損なわれます。

sassでは親セレクタである『li』あるいは『a』の部分を『&』を書くことで参照することができます。

sass

li {
	float: left;
	margin-left: 10px;
	list-style: none;
	
	& a {
	display: block;
	width: 24px;
	height: 24px;
	
	     & :link{
	      background: url(../img/snsIcon.png) no-repeat left top;
	
	     }
	
	     & :hover{
	　　background: url(../img/snsIcon.png)  no-repeat left -24px;
		  
		  }
	}

}

cssコンパイル後

li {
  float: left;
  margin-left: 10px;
  list-style: none;
}
li a {
  display: block;
  width: 24px;
  height: 24px;
}
li a :link {
  background: url(../img/snsIcon.png) no-repeat left top;
}
li a :hover {
  background: url(../img/snsIcon.png) no-repeat left -24px;
}