通過@Extend在SASS中的繼承的好處-css教學-PHP中文網

首頁

web前端

css教學

通過@Extend在SASS中的繼承的好處

Joseph Gordon-Levitt

Feb 22, 2025 am 10:07 AM

通過@Extend在SASS中的繼承的好處

鑰匙要點

SASS的@Extend功能允許類互相共享屬性，簡化了CSS樣式表的組織，並使大型網站更易於風格。
對於尚未探索Sass的人來說，這是CSS的擴展。它為我們提供了本機CS中不存在的功能，例如表達式，變量，嵌套，Mixins（Sass的函數名稱），繼承等等。在本文中，我將使用@Extend概述Sass中的繼承。我將介紹此功能在自己的項目中使用時帶來的優勢和經驗。重要的是要注意，@Extend可能會被濫用，雨果·吉羅（Hugo Giraudel）在Sitepoint上甚至寫了一篇文章，說明了為什麼您應該避免使用Sass @extend。因此請注意，@Extend可能是一個有爭議的主題。
觀看此課程觀看此課程在以下示例中，我將使用SCSS語法。這是包含CSS的所有功能和結構的語法，並具有SASS的其他功能。

@Extend是SASS的功能，允許類彼此共享一組屬性。 SASS中@Extend class的選擇器將在其延伸的類旁邊包含其選擇器，從而導致逗號分隔的列表。 >

它的語法看起來像：

>用法

使用@extend看起來像：

這是：

在上面的示例中，我定義了.foo和.bar，它們具有以下功能：>

.bar從.foo繼承，包含父級的所有屬性.foo。
.bar通過添加屬性背景色來擴展.foo。

知道基礎知識，我們現在將查看一些用例

使用@extend

>用例1：重複

在組合CSS時，很難避免

重複類之間的屬性。這可以使您的樣式表更加複雜。例如：

正如我們在上面的示例中所看到的。 farkfast，。 -ornunch和.dinner包含具有相同值的屬性，邊框，盒子陰影，邊距和填充物。這些屬性是重複的，使我們的代碼看起來很混亂，所以讓我們用@Extend重寫：

<span><span>@extend .class-name;</span></span>

在上面重寫的CSS中，我們可以看到，使用SASS可以幫助單獨使用SASS更加干淨。

請參閱codepen上的SCSS（@sitepoint）中SCSS中屬性的筆複製。

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

案例2：將多個類移出HTML

通常在設計一個頁面時，通常會有一個類別具有另一個類的所有樣式的情況。我們經常通過在html中使用多個類名來處理這種情況。

我們的CSS看起來像：

我們的html for tht css：

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

在上面的示例中，我們的

中有兩個類。想像一下，如果我們有幾個課程，這將是多麼混亂：

<span><span>.breakfast</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span>background-color: yellow;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span>background-color: orange;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}</span>

上面的HTML代碼可能變得非常複雜。一些Web開發人員喜歡這種方式，但是我更喜歡Sass樣式中的繼承：>

現在，我們的HTML看起來像：

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

這次我們只需要一個類。班級定義的所有樣式也適用於class .strawberry-candy，現在我們的html代碼變得更加干淨。

>請參閱codepen上的@extend（@sitepoint）的pen將多個類移出html。

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

<span><span><span><div> class<span>="candy strawberry-candy"</span>>
  This is the strawberry candy!
<span><span><span></span></span></span>
</div></span>></span></span>

案例3：擴展複雜的選擇器

類選擇器並不是唯一可以擴展的東西。我們還可以將復雜的選擇器擴展到一個元素中，例如：懸停，.parentClass.ChildClass等。例如：

這是：

然後我們可以在HTML中使用的

>：

<span><span><span><div> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>>
  This is just an example
<span><span><span></span></span></span>
</div></span>></span></span>

>請參閱codepen上的@extend（@sitepoint）的@extend的複雜選擇器。

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

@extend

的優勢

<span><span><span><div> class<span>="strawberry-candy"</span>>
  This is the very sweet candy!
<span><span><span></span></span></span>
</div></span>></span></span>

>瀏覽上面的示例，我們可以通過@Extend看到繼承的幾個優勢。這些包括：

清潔器HTML類

正如您在第二個案例研究中可以看到的那樣，在一個元素中使用如此多的類，如果您遇到問題，則很難確定根本原因。 HTML標籤的結構也看起來不太好且乾淨。

> 從我的角度來看，在製作好產品時，我們不僅要考慮最終用戶的觀點，而且還要考慮我們開發策略的質量。因此，@Extend幫助我們在每個HTML元素中以更乾淨的方式構造我們的課程。 >

降低CSS

的重複在Web開發中，我們在CSS樣式中始終有一些重複。因此，重複使用書面CSS源代碼可能是非常必要的。 @Extend可以幫助我們在適當且更清潔的情況下重複使用CSS。

節省時間和精力

有兩個上述優勢，開發人員可以在開發過程中節省時間和精力。

>開發人員可以將CSS重複使用各種元素，減少找到CSS問題根本原因並使CSS結構良好而乾淨的工作所需的精力。

> 但是，使用@Extend並非沒有危險。僅當仔細使用@Extend時，上述優勢僅適用 - 可以過度使用 @extend，從而導致相反的效果。

@extend

的危險

>我已經在自己的項目中應用@Extend，使用@Extend時需要謹慎。你必須小心。

@Extend可以大大增加您的CSS文件大小，並在不小心使用時會影響CSS的性能。在這樣的情況下，我感到痛苦，花了很多時間重構我的Sass使用@Extend。這是我最初錯誤地使用@Extend的一個示例：

>示例：

被編譯為：

在此示例中，.base-css是一個基於它的許多繼承類的類。如果您查看示例，您可以看到繼承的類無關。我的按鈕和.btn為我的頁腳提供了.btn。如果我有100個從.BASE-CSS繼承的類，則具有.base-CSS特性的選擇器將增加。這顯著，不必要地使我們的CSS最終結果復雜化。此外，這使得檢查每個選擇器的屬性更加困難。

>重新分解我的sass後，我意識到只有在繼承類直接與我們繼承的對像有關時，我們才應該使用@Extend。它應該是對像或樣式的變體，而不是許多無關元素的籠統規則。為了像我上面的示例一樣繼承，我們應該依靠CSS現有的功能將我們的樣式級聯到子元素中。

<span><span>@extend .class-name;</span></span>

被編譯為：

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

<span><span>@extend .class-name;</span></span>

>我們可以看到上面的示例更為正確和合理。我們通過僅將@Extend應用於應該彼此繼承的類，從而降低了範圍，這是由於一種類型的對象的變體。例如，以上樣式都與不同類型的按鈕有關。

結論

SASS是一個有價值的擴展，可以改善我們的CSS，以使其更清潔，結構良好，有條理且易於開發和維護。如果您以前沒有嘗試過Sass，我強烈建議您使用它。當您對Sass的基礎知識更加滿意時，我們建議閱讀Hugo Giraudel的Sitepoinp文章，介紹沒人告訴您Sass的@Extend。我們在SitePoint的Sass參考中也有整個SASS參考指南，並提供大量示例供您探索。

謝謝史蒂夫（Steve）和以西結（Ezekiel）在該帖子的第一個版本中提出錯誤的評論中，此後已更新。 >通過SASS 中的擴展的繼承的常見問題（常見問題解答）

>在sass中使用@Extend的主要優點是什麼？它使類能夠繼承另一個類的樣式，從而減少了編寫重複代碼的需求。這不僅使代碼更具可讀性，而且還可以減少文件大小，從而可以改善網頁的負載時間。

> @extend與sass的@mixin有何不同？ @Extend和@mixin在SASS中允許可重複使用代碼，它們以不同的方式工作。 @Extend允許選擇器繼承另一個選擇器的樣式，而@mixin包含一系列樣式，可以在整個樣式表中重複使用。關鍵區別在於，@extEnd會生成更少的CSS輸出，因為IT將選擇器與相同樣式組合在一起，而@mixin可以導致更多的CSS輸出，因為每次包含它時都會復製樣式。 @Extend在SASS中使用複雜的選擇器？

是的，您可以在sass中使用@Extend使用@Extend。但是，重要的是要注意，@Extend只能與同一文件中存在的選擇器一起使用。它不會與在其他文件或由@mixin或函數生成的選擇中定義的選擇器一起使用。

為什麼在SASS中使用@Extend在媒體查詢中使用@Extend時，我會遇到錯誤？在SASS中，您不能在媒體查詢中使用@Extend來擴展媒體查詢之外定義的類。這是因為@Extend通過將選擇器與相同樣式組合在一起，並且不能在不同的媒體查詢塊上進行此操作。要解決此問題，您可以定義要在同一媒體查詢塊中擴展的類

>我可以在sass中的嵌套規則中使用@extend？但是，重要的是要注意，擴展的選擇器將被插入樣式表的頂級，而不是嵌套規則範圍內。這是因為SASS遵循CSS規則，所有選擇器都必須位於文檔的最高級別。

>我如何避免“僅在規則中使用擴展指令” SASS中的錯誤？ 🎜>當您嘗試在SASS中使用@Extend之外使用@Extend時，會發生此錯誤。為避免此錯誤，請確保您在規則集中使用@Extend。例如，您不應該寫“ @extend .class;”，而應寫入.new-class {@extend .class; }。但是，重要的是要注意，@Extend只會擴展偽級的樣式，而不是偽級本身。這意味著，如果您使用“ @extend：hover;”，它不會為選擇器添加懸停效果，而是會擴展：懸停偽class的樣式。