[筆記] Sass 實戰全攻略 – 1 – 簡介

章節連結

當撰寫上千行的程式碼時,模組式的管理 CSS 變成了一個需要的環節。Sass ( Syntactically Awesome Stylesheets ) ,專門將指令碼解析成CSS的手稿語言。它使用縮排來區分代碼塊,並且用換行將不同規則分隔開。你可以像撰寫 JavaScript 一樣來編輯你的 CSS,在使用上更加具有邏輯性。
sass logo


課程對應章節

Course 1 ~ Course 9 (全部一共有 72 Courses)

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

內容

1.Sass 撰寫完後,靠著編譯器編譯成瀏覽器看的懂得 .css。換言之,在網頁中引入還是 .css,不過撰寫時的附檔名是用 .scss or .sass。
2.Sass 有兩種寫法。Scss 比較接近網頁前端開發者習慣的 css,由 {} 和 ; 作為區隔。Sass 則比較接近後端開發者的語法,用兩個空白或是 tab 來區隔。
3.若你是使用像 sublime 的編輯器,你可以下載 prepos 來即時監聽你的 scss / sass 檔案。它會輸出成一個 all.css 檔。
4.若你是使用如 VS Code,你需要下載 Sass 和 Live Sass Compiler,才能正常編譯和 Highlight 表示。
5.最直覺的差別,就是支援巢狀的寫法,這樣維護上比較容易。
6. “&” 的使用,可以節省重複撰寫的時間,像是寫 :hover 之類的效果時就很好用。


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