iT邦幫忙

2024 iThome 鐵人賽
DAY 0
0
佛心分享-IT 人自學之術

SASS/SCSS的認識與實作系列 第 13 篇

Day13 繼承 Inheritance

16th鐵人賽
114 瀏覽

  • 分享至 

  • xImage
    •  
  1. 繼承 Inheritance 是什麼
  • 一種 CSS 層疊樣式表的設計模式
  • 允許一個選擇器繼承另一個選擇器的樣式
  • 繼承在 CSS 中可以使得相同或類似的樣式重用，減少樣式的重複書寫
  1. SASS 中的繼承
  • 透過 @extend 關鍵字來實現
  • 當一個選擇器繼承另一個選擇器的樣式時，繼承者將擁有被繼承者的所有樣式
  • 有助於減少冗餘樣式，並提高程式碼的可維護性
  1. 應用場景
  • 樣式重用：當多個選擇器有相似的樣式時，可以使用繼承來減少樣式的重複定義
  • 例如，若多個按鈕類別有相同的基本樣式，但顏色不同，可以使用繼承來重用基本樣式
  • 保持一致性：繼承有助於在專案中保持樣式的一致性，因為繼承者將自動更新繼承自父選擇器的樣式。
  1. 優點
  • 減少重複：繼承可以避免重複定義樣式，減少 CSS 的多餘
  • 提高維護性：當基礎樣式發生變更時，繼承者會自動更新，從而減少修改不同選擇器的麻煩
  1. 缺點
  • 選擇器過度擴展：繼承會生成新的組合選擇器，這可能導致編譯後的 CSS 選擇器變得過於複雜，甚至比直接書寫樣式更長
  • 限制靈活性：當你使用繼承時，你無法僅繼承部分樣式，這可能會引入不必要的樣式，限制靈活性
  1. 優化建議
  • 避免過度繼承：雖然繼承能減少樣式重複，但如果樣式過於複雜或變動性較大，應謹慎使用，避免生成過於複雜的選擇器

上一篇
Day12 混合器例子
下一篇
Day14 繼承的例子
系列文
SASS/SCSS的認識與實作 共 30 篇
  1. 26
    Day26 模塊化 SASS 架構例子
  2. 27
    Day27 SASS 相關的開發工具
  3. 28
    Day28 自動編譯
  4. 29
    Day29 SASS 生成主題
  5. 30
    Day 30 深淺色主題實作
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22196 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙