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