SASS教學 » Sass @extend指令

Sass @extend指令

@extend指令用於共用規則和選擇器之間的關係。它可以擴充套件所有其他類的樣式在一個類中，也可應用於自己特定的樣式。以下是擴充套件的型別：
型別和說明
語法 編譯後程式碼
擴充套件複雜的選擇器：
它可以僅由一個單一的元素或類選擇器擴充套件選擇器。 
		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;
  	}
鏈式擴充套件：
由第二選擇器擴充套件第一選擇器，和第二選擇器被第三選擇器擴充套件，因此這被稱為鏈式擴充套件。 
		.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或類，它可以防止自己的規則設定被渲染為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;
  	  }
!optional 標誌
!optional標誌用來允許@extend不創造任何新的選擇器。 
		h2.important {
		  @extend .style !optional;
		}
	
	A blank compile page gets display.
@extend在指令中
如果@extend使用了@media內部，那麼它可以只擴充套件相同的指令塊記憶體在的選擇器。 
		@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;
    	}
    }

範例

下面的例子演示了在SCSS檔案使用@extend：

extend.html 

<!doctype html>
<head><meta charset="UTF-8"> <title>擴充套件範例 -www.tw511.com</title>
	<link rel="stylesheet" href="extend.css" type="text/css" />
</head>
<body class="container">
    <h2>擴充套件使用範例</h2>
    <p class="style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
接下來，建立檔案extend.scss。

extend.scss 

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

h2{
	color: #787878;
	@extend .style

}
.container{
	@extend h2
}
可以告訴SASS監視檔案，並隨時使用下面的命令更新SASS檔案來修改CSS： 
sass --watch C:\Ruby22-x64\extend.scss:extend.css
接著執行上面的命令，它會自動建立extend.css檔案，如下面的程式碼：

extend.css 

.style, h2, .container {
	font-size: 30px;
	font-style: italic;
 }

h2, .container {
	color: #787878;
}

輸出結果

讓我們來執行以下步驟，看看上面的程式碼工作：
  • 儲存上述的HTML程式碼到 extend.html 檔案。
  • 在瀏覽器中開啟該HTML檔案，得到輸出如下顯示。