緊跟任何開發工具包的更新都是一件需要持續努力的事，特別是前端開發工具。

把你的注意力從方法和技術的洪流中移開一會，你就可能會錯過什麼！ 上週我遇到我的一個前端開發朋友，他很興奮地跟我談論他使用的一些新工具。其中最有意思的是使用 Grunt 來編譯 SCSS。

人們很容易忘記不是每個人都和你走在同一條路上。他們或是有使用限制，或是視野狹窄，無法洞悉周遭的環境。我使用 Grunt 和使用 SCSS 一樣久。聽他講起他不得不通過命令列可以手動觸發編譯之後，我很是痛苦。所以我想分享一些我經常使用的前端開發工具。（尤其是CSS）

極為重要的前端開發工具

1. 檔案檢視和編譯

首先，如果你還在使用命令列編譯SASS，那肯定得看自動執行的過程，這裡有許多你用得上的工具，我使用 Grunt-Watch，但是有很多人喜歡 Gulp-Watch。

一些 IDE 內建前處理器，可以看看到底哪個適合你。

2. SCSS 庫

庫是一個大型工具包，它包含並混合從 CSS 重置、跨瀏覽器背景漸變和使用黃金比例設定字型大小的便捷數學計算等的很多東西。

主流的庫：

• Bourbon

• Compass

• PostCSS

我使用 Compass 好幾年了，這是一個很棒的工具集。

但是我發現它能做的遠超我的實際需要 。我用在 Compass 上學到的知識建立了一個輕量級的自定義棧外掛，它使得 scss 編譯時間從4秒降低到幾乎為零。

3. Autoprefixer

不必擔心瀏覽器字首問題了！

Autoprefixer 

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

1. 你通過文件化的CSS得到正強化。

2. 由於文件和視覺化的樣式嚮導，元件更容易被找到和重用-不用懷疑，如果已經建立了一個類似的元件！

6. CSS minification with CSS NANO

自動縮小我編寫的CSS檔案。

Minification for front end development

CSSNANO 也可以刪除所有不必要的或過時的瀏覽器字首，如果有的話，以及重複的類。

作者：前端攻城獅

出處：cnblogs

連結：http://www.cnblogs.com/qianduantuanzhang/p/7832512.html