Sass 擴(kuò)展指令

h2 {font-size:40px;}
.container {@extend h2}}

h2,.container {
font-size:40px;
}

.style{
  font-size: 25px;
  font-style: italic;
}
h2{
  color: #61C8E1;
}
.container{
  @extend .style;
  @extend h2
}
	

.style, .container {
  font-size: 25px;
  font-style: italic;
}
h2, .container {
  color: #61C8E1;
}
			

鏈接擴(kuò)展

第一選擇器由第二選擇器擴(kuò)展，第二選擇器由第三選擇器擴(kuò)展，因此這被稱為鏈接擴(kuò)展。

.style{
 font-size: 25px;
 font-style: italic;
}

h2{
 color: #61C8E1;
 @extend .style
}

.container{
  @extend h2
}
	
			

.style, h2, .container {
 font-size: 25px;
 font-style: italic;
}
h2, .container {
  color: #61C8E1;
}
	

選擇器序列

嵌套選擇器可以自己使用@extend。

合并選擇器序列

.style{
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

h2 .container {
 @extend .style
}
			

.container .style a {
 font-weight: bold;
}
#id .example {
 @extend a;
}
	
	

.style, h2 .container {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

.container .style a, .container.style #id
.example, #id .container 
.style .example {
  font-weight: bold;
}

@extend - 僅選擇器

它百分比字符（％）可以用于任何id或類，它阻止自己的規(guī)則集呈現(xiàn)到CSS。

.style a%extreme {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

.container {
 @extend %extreme;
}

.style a.container {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

可選標(biāo)志

！可選標(biāo)志用于允許 @extend 不創(chuàng)建任何新的選擇器。

h2.important {
 @extend .style !optional;
}

A blank compile page gets display.
	
	
						

@extend 指令

如果 @ext 內(nèi)使用 @extend ，則它可以擴(kuò)展僅存在于相同指令塊中的選擇器。

@media print {
 .style {       font-size:25px;			 font-style: italic;
 }
.container {
@extend .style;
color: #61C8E1;
 }
}
	

@media print {
 .style, .container {
  font-size: 25px;
  font-style: italic;
 }
 .container {
   color: #61C8E1;
  }
}