技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
0
0
佛心分享-IT 人自學之術
SASS/SCSS的認識與實作
系列 第
13
篇
Day13 繼承 Inheritance
16th鐵人賽
yu_ting
2024-09-28 22:28:24
252 瀏覽
分享至
繼承 Inheritance 是什麼
一種 CSS 層疊樣式表的設計模式
允許一個選擇器繼承另一個選擇器的樣式
繼承在 CSS 中可以使得相同或類似的樣式重用,減少樣式的重複書寫
SASS 中的繼承
透過 @extend 關鍵字來實現
當一個選擇器繼承另一個選擇器的樣式時,繼承者將擁有被繼承者的所有樣式
有助於減少冗餘樣式,並提高程式碼的可維護性
應用場景
樣式重用:當多個選擇器有相似的樣式時,可以使用繼承來減少樣式的重複定義
例如,若多個按鈕類別有相同的基本樣式,但顏色不同,可以使用繼承來重用基本樣式
保持一致性:繼承有助於在專案中保持樣式的一致性,因為繼承者將自動更新繼承自父選擇器的樣式。
優點
減少重複:繼承可以避免重複定義樣式,減少 CSS 的多餘
提高維護性:當基礎樣式發生變更時,繼承者會自動更新,從而減少修改不同選擇器的麻煩
缺點
選擇器過度擴展:繼承會生成新的組合選擇器,這可能導致編譯後的 CSS 選擇器變得過於複雜,甚至比直接書寫樣式更長
限制靈活性:當你使用繼承時,你無法僅繼承部分樣式,這可能會引入不必要的樣式,限制靈活性
優化建議
避免過度繼承:雖然繼承能減少樣式重複,但如果樣式過於複雜或變動性較大,應謹慎使用,避免生成過於複雜的選擇器
留言
追蹤
檢舉
上一篇
Day12 混合器例子
下一篇
Day14 繼承的例子
系列文
SASS/SCSS的認識與實作
共
30
篇
目錄
RSS系列文
訂閱系列文
0
人訂閱
26
Day26 模塊化 SASS 架構例子
27
Day27 SASS 相關的開發工具
28
Day28 自動編譯
29
Day29 SASS 生成主題
30
Day 30 深淺色主題實作
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
14689
篇
完賽人數
169
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
17th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
部屬電腦如何讓每一台開始功能表跟工作列都一樣
請教大神.這個google試算表到底發生了什麼事情?輸入或是修改資料整張工作表會被清空,已自行解決完成.感謝.
如何使用RPA軟體搜尋相關新聞
useCrudSchemas的swtich欄位吃不到網址的參數
Analysis Services資料庫還原失敗
對Kotlin的sealed class機制不太清楚
excel web adi 巨集,出現網頁指令碼錯誤
list of Official coinbase™™Customer care"" Numbers in the USA: A Complete Guide
熱門回答
部屬電腦如何讓每一台開始功能表跟工作列都一樣
如何使用RPA軟體搜尋相關新聞
熱門文章
第12天,實作無封裝數位簽章 / 店小二魯肉飯 號稱第二的滷肉飯(新北三重) | 30天滷肉飯
第12天,Cloudflare Pages 與 Workers / 馬力碳烤雞排 | 30天板橋湳雅夜市
[為你自己學 n8n] 第 13 天,LINE 機器人誕生記!
第13天,實作PKCS#7封裝的數位簽章 / 雙月食品社(台北中正)| 30天滷肉飯
第13天,Cloudflare Pages 與 Functions / 好椰熱帶特調 泰奶天花板 | 30天板橋湳雅夜市
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}