緊跟任何開發工具包的更新都是一件需要持續努力的事，特別是前端開發工具。 把你的註意力從方法和技術的洪流中移開一會，你就可能會錯過什麼！ 上周我遇到我的一個前端開發朋友，他很興奮地跟我談論他使用的一些新工具。其中最有意思的是使用 Grunt 來編譯 SCSS。 人們很容易忘記不是每個人都和你走在同一條 ...
緊跟任何開發工具包的更新都是一件需要持續努力的事，特別是前端開發工具。
把你的註意力從方法和技術的洪流中移開一會，你就可能會錯過什麼！ 上周我遇到我的一個前端開發朋友，他很興奮地跟我談論他使用的一些新工具。其中最有意思的是使用 Grunt 來編譯 SCSS。
人們很容易忘記不是每個人都和你走在同一條路上。他們或是有使用限制，或是視野狹窄，無法洞悉周遭的環境。我使用 Grunt 和使用 SCSS 一樣久。聽他講起他不得不通過命令行可以手動觸發編譯之後，我很是痛苦。所以我想分享一些我經常使用的前端開發工具。（尤其是CSS）
極為重要的前端開發工具
1. 文件查看和編譯
首先，如果你還在使用命令行編譯SASS，那肯定得看自動執行的過程，這裡有許多你用得上的工具，我使用 Grunt-Watch，但是有很多人喜歡 Gulp-Watch。
一些 IDE 內建預處理器，可以看看到底哪個適合你。
2. SCSS 庫
庫是一個大型工具包，它包含並混合從 CSS 重置、跨瀏覽器背景漸變和使用黃金比例設置字體大小的便捷數學計算等的很多東西。
主流的庫：
我使用 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 也可以刪除所有不必要的或過時的瀏覽器首碼，如果有的話，以及重覆的類。
5. KSS styleguide
KSS 允許你從你的CSS直接創建一個樣式嚮導文件，這有很多的優點。
配對的 KSS含有一個模塊化的CSS，比如BEM，允許你可靠的創建一個可重覆使用的可見樣式集，你會從強大的文檔中獲得巨大的回報。
- 你通過文檔化的CSS得到正強化。
- 由於文檔和可視化的樣式嚮導，組件更容易被找到和重用-不用懷疑，如果已經建立了一個類似的組件！
6. CSS minification with CSS NANO
自動縮小我編寫的CSS文件。
CSSNANO 也可以刪除所有不必要的或過時的瀏覽器首碼，如果有的話，以及重覆的類。
我有一個前端學習交流QQ群：328058344 如果你在學習前端的過程中遇到什麼問題，歡迎來我的QQ群提問，群里每天還會更新一些學習資源。禁止閑聊，非喜勿進。
