作者：前端攻城獅 出處：cnblogs鏈接：http://www.cnblogs.com/qianduantuanzhang/p/783251
嘿，朋友！把你的注意力從方法和技術的洪流中移開一會，你就可能會錯過什么！上周我遇到我的一個前端開發朋友，他很興奮地跟我談論他使用的一些新工具。其中最有意思的是使用 Grunt 來編譯 Scss。
人們很容易忘記不是每個人都和你走在同一條路上。他們或是有使用限制，或是視野狹窄，無法洞悉周遭的環境。我使用 Grunt 和使用 SCSS 一樣久。聽他講起他不得不通過命令行可以手動觸發編譯之后，我很是痛苦。所以我想分享一些我經常使用的前端開發工具（尤其是CSS）和極為重要的前端開發工具。
1、文件查看和編譯
首先，如果你還在使用命令行編譯SASS，那肯定得看自動執行的過程，這里有許多你用得上的工具，我使用 Grunt-Watch，但是有很多人喜歡 Gulp-Watch。
一些 IDE 內建預處理器，可以看看到底哪個適合你。
2、CSS庫
庫是一個大型工具包，它包含并混合從 CSS 重置、跨瀏覽器背景漸變和使用黃金比例設置字體大小的便捷數學計算等的很多東西。
主流的庫：
- Bourbon
- Compass
- PostCSS
我使用 Compass 好幾年了，這是一個很棒的工具集。
但是我發現它能做的遠超我的實際需要 。我用在 Compass 上學到的知識創建了一個輕量級的自定義棧插件，它使得 scss 編譯時間從4秒降低到幾乎為零。
3、Autoprefixer
不必擔心瀏覽器前綴問題了！
Autoprefixer 基于 https://caniuse.com 添加所需的前綴。當我單槍匹馬干活時，給我節省了不少時間，強烈推薦。
4、Animate.css
我喜歡編寫我自己的 CSS 動畫效果，但經常我們沒有太多的時間。
Animate.css 可以讓我快速的添加和測試 CSS 動畫效果，無需思考這些動畫的邏輯。
5、KSS styleguide
KSS 允許你從你的CSS直接創建一個樣式向導文件，這有很多的優點。
配對的 KSS含有一個模塊化的CSS，比如BEM，允許你可靠的創建一個可重復使用的可見樣式集，你會從強大的文檔中獲得巨大的回報。
KSS Styleguide is one of my favorite front end development tools
- 你通過文檔化的CSS得到正強化。
- 由于文檔和可視化的樣式向導，組件更容易被找到和重用-不用懷疑，如果已經建立了一個類似的組件！
6、CSS minification with CSS NANO
自動縮小我編寫的CSS文件。
Minification for front end development
CSSNANO 也可以刪除所有不必要的或過時的瀏覽器前綴，如果有的話，以及重復的類。
