Sassの@extend の応用

css scss sass

同じルールセット内に複数の@extendを指定。

scss(継承元,_extend.scss)

.first{
 font-size: 36px;
 text-indent: 1em;
 span{
	font-size: 80%;
	color: #666;
	}
}

.second{
 font-size: 24px;
 text-indent: 0.7em;
 span{
	 font-size: 18px;
	 color: #999;
	 }
}


.accentBG{
  background: #F4060A;
}

.ligthBG{
  background: #AB9696;
}

scss(継承先)

@import "_extend.scss)";


dl{
 dd#main{
	@extend .first;
	@extend .accentBG;
	}
 dd#sub{
	@extend .second;
	@extend .lightBG;
	}
}


css(コンパイル後)

.first, dl dd#main {
  font-size: 36px;
  text-indent: 1em;
}
.first span, dl dd#main span {
  font-size: 80%;
  color: #666;
}

.second, dl dd#sub {
  font-size: 24px;
  text-indent: 0.7em;
}
.second span, dl dd#sub span {
  font-size: 18px;
  color: #999;
}

.accentBG, dl dd#main {
  background: #F4060A;
}

.ligthBG {
  background: #AB9696;
}

@extendの連鎖継承

scss

.first{
 font-size: 36px;
 text-indent: 1em;
 span{
	font-size: 80%;
	color: #666;
	}
}

.accentBG{
  //.firstを継承
  @extend .first;
  background: #F4060A;
}


dl{
 dd{
  @extend .accentBG;	
  }
}

css(コンパイル後)

.first, .accentBG, dl dd {
  font-size: 36px;
  text-indent: 1em;
}
.first span, .accentBG span, dl dd span {
  font-size: 80%;
  color: #666;
}

.accentBG, dl dd {
  background: #F4060A;
}

@extendで使用できるセレクタ

これまで使用してきたクラスセレクタ以外に使用できるセレクタと
使用できないセレクタ。

使用できるセレクタ
タイプセレクタ div{~},p{~}
IDセレクタ #main{~},#sub{~}
Classセレクタ .navButton{~}
属性セレクタ input[type="radio"]{~}
連結セレクタ #main.text{~}
疑似グラスセレクタ a:link{~},a:hover{~}
疑似要素 before{~},:after{~}
使用できないセレクタ
子孫セレクタ .item p{~}
子セレクタ section > article{~}
隣接セレクタ h1 + p{~}
間接セレクタ h3~h3{~}