@extend専用のプレースホルダーセレクタ

@extendでscssファイルをコンパイルすると
継承元のセレクタも自動的に記述されます。

継承元のセレクタである#(シャープ)や.(ドット)の代わりに%(パーセント)を代わりに
入れるとコンパイル先のcssに継承元のセレクタが記述されませんので
用途によって変数代わりに使用できます。

scss

//る#(シャープ)や.(ドット)の代わりに%(パーセント)をつける
//これをプレースホルダーセレクターという。

%first{
 font-size: 36px;
 text-indent: 1em;
}

dl{
 dd{
  @extend %first;	
  }
}

css

%first{
 font-size: 36px;
 text-indent: 1em;
}

//本来ここに記述される継承元のセレクタが
//接頭辞に"%"を付け変えるることで記述されない。

dl dd {
  font-size: 36px;
  text-indent: 1em;
}