[筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法

章節連結

妥善運用變數和 mixin,這樣就可以方便管理你常用的 css 方法,在必要時候免去你上網 google 查詢的困擾。同時,你也可以藉此開始打包一套屬於自己的常用 mixin 資料庫包,在日後撰寫各種 css 時來優先載入。sass logo


課程對應章節

Course 24 ~ Course 28 (全部一共有 72 Courses)

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

內容

1. mixin的語法為 @mixin name{<something>} 或是 @mixin name($a,$b){<something>} 。你可以想像成在寫一個函式,然後你可以傳入變數來做使用。
2. 實際運用上,記得由上到下的讀取規則,先在作為 index 的 all.scss 載入 @import “mixin”,然後在要使用的 css 所在用 @include <方法名稱>(變數),就可以成功編譯。

範例

 


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瀏覽人氣:34