Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS preprocessor 介紹,與 SASS 入門分享

5,991 views

Published on

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

Published in: Technology
  • Dating direct: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×