Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

CSS preprocessor 介紹,與 SASS 入門分享

6.017 visualizaciones

Publicado el

分析目前常見的三款 CSS preprocessor - LESS, SASS, Stylus,介紹他們的優缺點及如何去挑選適合專案的選擇。並介紹 SASS 的基本語法及新手入門心得。

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

CSS preprocessor 介紹,與 SASS 入門分享

  1. 1. CSS Preprocessor 介紹 與 SASS 入門分享 Wan-Ting Jheng 2015/2/10
  2. 2. 後端工程師,主要是php/MySQL 這年頭只要和網路設計師有關聯 就算應徵的是後端工程師 也會有前端的工作掉到頭上 因此我也稍微會一點點 CSS 自介
  3. 3. CSS (Cascading Style Sheets) 用來控制網頁外觀 例如 元素位置、外型、顏色、特效 等等 不算是一種可程式化語言,只是許多屬性設定的集合 HTML CSS
  4. 4. 如果寫CSS,也能像一般的 程式語言一樣,具有變數、數 學運算、條件式、迴圈、函式 庫等等,該有多好? CSS 缺點: 結構很難有組織、不易維護
  5. 5. 於是 CSS Preprocessor 應運而生 定義一種新的程式語言 透過這個語言進行網頁樣式設計 然後再轉換生成CSS檔 為撰寫樣式的過程,加上程式語言特性 讓程式變簡潔 可讀性更好 更易維護
  6. 6. 目前常見的三款 CSS preprocessor http://sass-lang.com/ http://lesscss.org/ http://lesscss.org/
  7. 7. SASS LESS Stylus 出現時間 2007年誕生 發展最早 2009年 2010年 相對年輕 執行環境 Ruby ● client 端執行 引入一隻.js ● server 端執行 安裝Node.js Node.js 語法 較成熟 CSS的擴展 程式特性較差 沒有高級功能 如 loop (可透過條件式與 遞迴組合達到) 較自由、不嚴謹
  8. 8. 有程式底子的工程師 需要較複雜CSS效果 已經是 Ruby,或不排斥安裝 Ruby 的使用者 沒有程式經驗的設計師 只是想稍微玩一下的輕量級使用者 有程式底子的工程師 需要較複雜CSS效果 已經是 Node.js,或不排斥安裝 Node.js 的使用者 選 適合 選
  9. 9. 在說明 SASS 基本語法之前 先來看個範例 - 我的 SASS 作業 github page http://wantingj.github.io/sass_calender/ github repo. https://github.com/wantingj/sass_calender
  10. 10. 變數 Variables 以 $ 開頭後面跟著變數名稱 用 : 分隔變數名 與變數值 數學運算 加減乘除樣樣 OK 方便計算寬度,間距等
  11. 11. 巢狀 Nesting html 的巢狀結構,透過 SASS 的巢狀語法 可省下過去寫 CSS 時,必須重覆寫父節點名稱的動作 並且讓程式更有結構性 SASS CSS
  12. 12. & - 參考父選擇符 % - 佔位選擇符 合併樣式 Extend 多個選擇器要使用同樣樣式 可透過 extend 合併 SASS CSS
  13. 13. Mixin 概念有點像函式、巨集 當有一段 CSS 設定經常重複使用 可以將該段程式獨立成一個 mixin 方便取用 例如 瀏覽器兼容性設定 可以傳入參數,並預設參數值 可以傳入 @content content 可為整段 CSS (選擇器,屬性,設定值)
  14. 14. 比較 Extend 與 Mixin Extend 單純合併樣式 好處是產生的 CSS 內容較短 運用時機: 許多選擇器具有相同樣式時 Mixin 由於可以傳參數、content 可以做到許多複雜功能 運用時機: 自製好用小工具集 透過 mixin 收集為一隻檔案
  15. 15. Import 將程式碼分割成多個檔案 避免過去 css 動不動就上千行導致維護困難 對於程式結構組織化很有幫助 修改程式時,有助於聚焦在特定功能上 檔案名以下底線 _ 為前綴的 sass 檔不會產生 css 檔 ref. http://ithelp.ithome.com.tw/question/10132821
  16. 16. 顏色函數 SASS 提供許多顏色相關功能 如: 調整 明暗 / 飽合度 / 色相 / 透明度 等 可滿足多數需求 ref. http://sassme.arc90.com/
  17. 17. compass http://compass-style.org/ SASS的擴充 提供豐富的函式庫 特效,如圓角、漸層、image sprite等 輕鬆處理瀏覽器相容性問題 還有... 變數類型: list, key-value pair if/else, loop (for,each,while)
  18. 18. 結論 工欲善其事,必先利其器 透過 CSS preprocessor 的幫助 可以大大簡化撰寫 CSS 的過程,並且讓程式碼更好維護 有優點當然也會有缺點 需要安裝執行環境,對不熟悉下指令的人來說會有門檻 有此困難的人建議可以從 LESS 入門 從已存在的 CSS 專案導入 願意嘗試就是好的開始~
  19. 19. Reference SASS/LESS/Stylus 表格式詳細比較 http://csspre.com/compare SASS/LESS/Stylus 安裝環境、語法比較 http://www.cn-sass.com/%E6%95%99%E7%A8%8B/css-preprocessor-sass-vs-less- stylus.html Sass教學手冊導讀 http://ithelp.ithome.com.tw/question/10161764 Sass 語法https://github.com/hlb/sass-doc- zh/blob/master/SASS_REFERENCE_ZH_TW.md

×