[筆記] Sass 實戰全攻略 – 11 – 自製格線系統

Posted onAuthorANDY LIEN

章節連結

這一段算是額外的補充部分，但也是很實用的章節。藉由介紹、分解既有的格線系統，你也可以製作一個屬於自己的格線系統。sass logo

課程對應章節

Course 62 ～ Course 68 (全部一共有 72 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2

內容

1. 模組化的格線系統，可以運用 @for 迴圈來方便撰寫
2. Gutter：每個格線區塊的間隔
原理：先用 padding 拉出 Gutter，再設定 max-width。邊界用 margin-left margin-right 壓回，最後再用 container 避免行動版對齊問題

示範

Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
    • 按讚加入粉絲團

    延伸閱讀