資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究SASS 中的 @extend 指令是什麼？
SASS 允許開發人員編寫更易讀的程式碼並以更好的方式操作它。它包含多個指令，例如 @media、@content、@include、@mixin、@extend 等，提供了一些功能，以便開發人員可以編寫比普通 CSS 更好的程式碼。
在本教程中，我們將學習 SASS 中的 @指令。@extend 指令允許開發人員擴充套件 CSS 程式碼。但是，mixin 也擴充套件了 CSS 程式碼並避免重複。@extend 指令也允許我們避免程式碼的重複。
例如，如果您有一個應用程式字型的通用 CSS，並且需要在每個地方使用不同的字型大小，您可以擴充套件字型樣式並新增自定義字型大小。這樣，您就不需要編寫重複的程式碼。
此外，開發人員可以使用 @extend 指令在 CSS 中實現繼承，我們將在示例中學習。
語法
使用者可以按照以下語法在 SASS 中使用 @extend 指令。
selector {
/* CSS code */
}
Another_CSS_selector {
@extend selector;
/* CSS code */
}
在以上語法中，我們可以在 'selector' 的宣告塊中編寫通用 CSS。之後，我們可以在 'Another_CSS_Selector' 內部擴充套件選擇器並新增其自己的程式碼。
示例 1（@extend 指令的基本用法）
在下面的示例中，我們為具有 'card' 類名的 HTML 元素定義了一些樣式。之後，我們為 'small_card' 和 'large_Card' 元素定義了 CSS。我們在兩個選擇器中都使用了 @extend 指令來擴充套件 'card' 選擇器的 CSS。此外，我們在 'small_card' 和 'large_card' 選擇器中包含了一些其他 CSS，例如寬度、高度等。
.card {
background-color: aliceblue;
color: green;
border: 2px solid pink;
border-radius: 1.4rem;
}
.small_card {
@extend .card;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
}
.large_card {
@extend .card;
width: 500px;
height: 500px;
margin: 10px;
padding: 10px;
}
輸出
在下面的輸出中，我們可以觀察到 'card' 選擇器的樣式應用於 'small_card' 和 'large_card' 選擇器。額外的 CSS 也分別應用於這兩個選擇器。
.card,
.small_card,
.large_card {
background-color: aliceblue;
color: green;
border: 2px solid pink;
border-radius: 1.4rem;
}
.small_card {
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
}
.large_card {
width: 500px;
height: 500px;
margin: 10px;
padding: 10px;
}
示例 2（使用 @extend 指令建立繼承鏈）
在下面的示例中，我們演示瞭如何使用 @extend 指令建立繼承鏈。在這裡，我們在 '.first' 選擇器中添加了一些 CSS。之後，我們在 '.second' 選擇器內部擴充套件了 '.first' 選擇器並添加了一些額外的 CSS。
接下來，我們在 '.third' 選擇器內部擴充套件了 '.second' 選擇器，並在 '.fourth' 選擇器內部擴充套件了 '.third' 選擇器。因此，在這裡我們使用不同的 CSS 選擇器建立了繼承鏈。
.first {
width: 100px;
height: auto;
}
.second {
@extend .first;
color: blue;
}
.third {
@extend .second;
background-color: pink;
border: 2px dotted red;
}
.fourth {
@extend .third;
margin: 10px;
padding: 1rem;
}
輸出
下面的輸出顯示了當我們使用 @extend 指令建立繼承鏈時，CSS 程式碼如何應用於不同的 CSS 選擇器。
.first,
.second,
.third,
.fourth {
width: 100px;
height: auto;
}
.second,
.third,
.fourth {
color: blue;
}
.third,
.fourth {
background-color: pink;
border: 2px dotted red;
}
.fourth {
margin: 10px;
padding: 1rem;
}
示例 3（使用 @extend 指令實現多重繼承）
在本示例中，我們演示瞭如何使用 @extend 指令實現多重繼承。多重繼承的意思是單個選擇器擴充套件了多個選擇器。
在這裡，我們定義了 '.container' 和 '.main' CSS 選擇器並添加了一些 CSS。之後，在 '.element' CSS 選擇器內部，我們擴充套件了 '.container' 和 '.main' 選擇器。
.container {
width: 500px;
height: 500px;
background-color: beige;
}
.main{
color: pink;
float: left;
max-width: 600px;
max-height: 700px;
overflow: auto;
}
.element {
@extend .main;
@extend .container;
padding: 2%;
}
輸出
.container,
.element {
width: 500px;
height: 500px;
background-color: beige;
}
.main,
.element {
color: pink;
float: left;
max-width: 600px;
max-height: 700px;
overflow: auto;
}
.element {
padding: 2%;
}
示例 4（在 @media 指令內部使用 @extend 指令）
在下面的示例中，我們在 @media 指令內部使用了 @extend 指令。但是，只要我們在 @media 指令的選擇器內部擴充套件在 @media 指令外部定義的 CSS 選擇器，SASS 編譯器就會報錯。
在這裡，我們在 @media 指令內部使用 '.button' CSS 選擇器擴充套件了 '.small_button' CSS 選擇器。使用者可以觀察到，這裡兩個選擇器都在 @media 指令內部。
@media small_screen {
.button {
width: 50%;
clear: both;
font-size: 1.3rem;
}
.small_button {
@extend .button;
@extend .main;
height: 25%;
}
}
輸出
@media small_screen {
.button,
.small_button {
width: 50%;
clear: both;
font-size: 1.3rem;
}
.small_button {
height: 25%;
}
}
示例 5（佔位符選擇器）
顧名思義，我們可以在選擇器名稱前新增 (%) 符號來建立佔位符選擇器。當我們編譯 SASS 程式碼時，佔位符選擇器不會出現在輸出程式碼中，但其樣式將在擴充套件它的位置新增。
例如，我們在這裡定義了 '%container' 佔位符選擇器。之後，我們在 'small_container' 和 'medium_container' 內部擴充套件了 container 選擇器。
在輸出中，我們可以觀察到它不包含 'container' 選擇器，但 'small_container' 和 'large_container' 包含 'container' 佔位符程式碼。
%container {
color: red;
background-color: green;
padding: 3%;
margin: 0 auto;
}
.small_container {
@extend %container;
width: 100px;
height: 100px;
}
.medium_container {
@extend %container;
width: 300px;
height: 300px;
}
輸出
.small_container,
.medium_container {
color: red;
background-color: green;
padding: 3%;
margin: 0 auto;
}
.small_container {
width: 100px;
height: 100px;
}
.medium_container {
width: 300px;
height: 300px;
}
在本教程中，使用者學習瞭如何使用 @extend 指令。基本上，我們可以使用它來擴充套件樣式表並避免程式碼重複。此外，我們還可以使用 @extend 指令在 CSS 中建立繼承鏈。
110 次檢視
