技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
0
0
佛心分享-IT 人自學之術
SASS/SCSS的認識與實作
系列 第
13
篇
Day13 繼承 Inheritance
16th鐵人賽
yu_ting
2024-09-28 22:28:24
254 瀏覽
分享至
繼承 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
組
累計文章數
19662
篇
完賽人數
530
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
17th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
作為新手想踏入MIS領域,應該讀什麼?
清掉所有cookie及暫存資料後,再次登入蝦皮還沒驗手機號前,就已偵測出我的帳號名稱!這是什麼技術?
OCS Inventory NG
M365 Outlook無法接收到 msa.hinet.net 網域信件
匯入edge系統管理範本後,原本的傳統系統管理範本遺失了
minecraft模組製作遇到BUG
熱門回答
作為新手想踏入MIS領域,應該讀什麼?
M365 Outlook無法接收到 msa.hinet.net 網域信件
清掉所有cookie及暫存資料後,再次登入蝦皮還沒驗手機號前,就已偵測出我的帳號名稱!這是什麼技術?
OCS Inventory NG
熱門文章
Day.6 好文件長什麼樣(命名規則・錯誤訊息格式・時間格式 ISO 8601)
版本控制是什麼?為什麼Git是必學工具?
Day 5 🔧 第一次動手:Postman 按按鈕測 2 次 產出:1 份 Collection(站/路線+到站各一支)
如何解決,Teams 未讀,聊天1,未讀訊息的紅點 消除不了/也找不到是哪一個訊息未讀,煩死了,爛透了
Day 17:自動化防禦流程實作(End-to-End Pipeline)
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}