Sass教程九 Sass知識點之 繼承

2021-09-25 23:58:39 字數 1547 閱讀 4138

@extend 繼承

在設計網頁的時候常常遇到這種情況：乙個元素使用的樣式與另乙個元素完全相同，但又新增了額外的樣式。通常會在 html 中給元素定義兩個 class，乙個通用樣式，乙個特殊樣式。那麼通過@extend我們可以這樣寫：

通用樣式：


.normal


特殊樣式：


.special


編譯過後：


.normal, .special 


.special
可以看到special繼承了normal之後，他們兩都會擁有color和background這兩條屬性，於是sass把這兩條屬性放在一起組成乙個群組選擇器，然後再把special所獨有的樣式拿出來形成乙個選擇器。

還是來看這個案例：

考慮一下實現方式

.btn


.btngray


.btnblue


html：
這是我們在css時代常有的做法。現在又了繼承之後，我們可以考慮節省一些**了：

.btngray


.btnblue


編譯過後：


.btngray, .btnblue 


.btnblue
大家可能會想我為什麼不直接讓btngray和btnblue去繼承 btn 呢？ 大家注意看最上面的**。normal作為被繼承的樣式，經過編譯之後也會出現在css檔案當中。 而在這個案例中，我們不需要單獨的btn類，所以我直接讓 btnblue 繼承 btngray 的所有樣式，然後再去新增 btnblue所獨有的樣式就可以了，利用css**的層疊效果可以自動把重複的**覆蓋。效果上來說是完全不受影響的。

.btngray


}.btnblue


編譯過後：


.btngray, .btnblue 


.btngray:hover, .btnblue:hover 


.btnblue
可以看到 btngray 和 btnblue 都具有了 hover 這個偽類，那再新增一些其他的樣式呢？

.btngray


.item


}.btnblue


編譯過後：


.btngray, .btnblue 


.btngray:hover, .btnblue:hover 


.btngray .item, .btnblue .item 


.btnblue
看到這裡，大家應該也看出來了，這玩意和 混合@mixin很相似啊。那我們以後到底是選擇繼承還是選擇混合呢？

在這裡我們首先要總結一下混合與繼承的區別：

大多數情況下，其實@mixin會比@extend更好，但是它們倆都有自己的一席之地。當樣式和選擇器之間的關係在某些方面比較緊密的時候，使用@extend。除此之外，你可以使用@mixin在任何地方。

sass各種知識點

sass學習筆記 css擴充套件 巢狀規則 與less相同父選擇器套子選擇器 父選擇器 與less相同 用於選擇父元素 屬性巢狀 funky 避免重複書寫佔位符選擇器 foo 注釋 會被輸出 不輸出 version 1.2.3 this css is generated by my snazzy f...

sass實用知識點

說明 本文的內容是，我在開發實踐中總結的實用性比較強的sass知識點，其他未涉及的知識，如果對你有作用請自行查閱 sass知識目錄 巢狀注釋 sassscript 規則mixin指令 巢狀一般寫法 div 父選擇器引用 div span 相同字首的css樣式簡寫形式 div div 注釋多行注釋 會...

linux教程 知識點總結

1.什麼是ssh協議 是一種建立在應用層基礎之上的,可以有效防止遠端管理過程中資訊洩露的安全性問題的協議.2.原理 伺服器啟動的時候自己產生乙個秘鑰,本地的ssh客戶端傳送連線請求到ssh伺服器,伺服器檢查連線點客戶端傳送的資料和ip位址,確認合法後傳送秘鑰給客戶端,此時客戶端將本地私鑰和伺服器的公...