[筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題

章節連結

Sass 的 mixin 可以幫助使用者在編寫 RWD 響應式網頁格式時,可以預先指定好自身常用的樣式表和斷點。這樣一來在實際運用上,可以增加可讀性,同時也避免當 css 檔的程式行數越發多時,容易漏改地方的問題。 sass logo


課程對應章節

Course 29 ~ Course 31 (全部一共有 72 Courses)

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

內容

1. mixin 搭配 @content,就會自動帶入你在指定 @include 的內容。這樣一來,你可以預先寫好各種常用的斷點,並給予命名來方便日後管理。
2.撰寫時,依舊要注意由上到下的讀取法則。可以搭配 @import 在作為索引的 all.scss 在一開始就先載入。

範例

 


Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] 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 – 簡介
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:20