使用Chrome除錯樣式（CSS和LESS）
新增工作目錄、建立檔案對映(Map to)、編輯CSS檔案或者使用樣式面板修改樣式、儲存樣式
F12+Sources+右鍵+Add folder to workspace+選擇+允許+檔案+右鍵+Map to network 


resource.
F12+Sources+檔案+右鍵+Map to file system resource.
此時,在Sources和Elements處修改，原始檔也被修改。


LESS CSS預處理語言
目標：less css 資料：http://lesscss.org/ 安裝：npm install -g less
使用lessc命令編輯less檔案
根據less更改css:lessc test.less test.css


LESS除錯
使用npm安裝lessc和wr工具npm install -g wr
使用lessc命令編譯less檔案
除錯啟動 重新載入生成的CSS 模式
使用wr命令跟蹤檔案修改實時編譯


執行時報錯解決辦法:單引號變為雙引號
儲存時報錯解決辦法:
wr工具此時執行的是spawn,需要執行的是exec，正確的程式碼為：wr --exec "lessc --


source-map duang.less duang.css" duang.less或者wr --exec "lessc --source-map 


duang.less duang.css" duang.less。詳解如下：
exec:
the command will not be parsed, as will be run as given
should handle i/o redirection shell operators
stdout and stderr output will be buffered until the command is complete
spawn:
the command will be parsed into space separated tokens, probably 


misinterpreting any quotes you have in your command
will not handle i/o redirection shell operators
stdout and stderr output will not be buffered
詳解來源：https://www.npmjs.com/package/wr


CSS與LESS對比
CSS原生支援、無需安裝工具；可以直接用樣式面板修改原始碼，實時儲存；程式碼繁瑣，可維


護性差。
LESS需要工具支援；不可以用樣式面板直接修改；程式碼簡潔，可維護性好




新增並除錯CSS3 Transition動畫


autoprefixer
使用設計軟體Illustrator編輯SVG檔案
繪製SVG向量圖、修改SVG向量圖、命名圖層並進一步在程式中引用、儲存成SVG格式


檔案使用：<svg data-src="img/bubble1.svg" width="200" height="100"></svg>


使用bower管理前端包依賴
安裝bower npm install -g bower 
新增jQuery依賴bower install jquery -save;
安裝已定義bower包（bower.json)的專案的依賴bower install


新增jQuery依賴時如報錯Bower : ENOGIT git is not installed or not in the PATH，


解決辦法：
步驟一  安裝git：http://msysgit.github.io/
步驟二  配置環境變數Path：;D:\Program Files (x86)\nodejs\;C:\Users\ASUS


\AppData\Roaming\npm;D:\Program Files (x86)\Git\bin;D:\Program Files (x86)\Git


\cmd


動態載入SVG


Ajax


製作任意向量圖的繪邊效果
stroke-dasharray定義描邊的虛實情況
stroke-dashoffset定義描邊虛實的偏移