9個適用於Web開發人員的CSS工具

無論你是一個多麼有經驗的開發人員，你都想讓你的生活儘量的簡單。正確的工具能夠幫助您完成此任務。你的能力取決於你使用的工具，因此花點時間挑選適合你須要的工具是明智的。

在本文中，我將討論每一個web開發人員均可以使用的一些工具，以便使你的工做更輕鬆、更高效。

1. Transition Generator

有一個CSS屬性有不少可能性，這讓你很難記住全部的CSS屬性，那就是 transition 屬性。

當你不肯定你想要什麼樣的過渡，或者你只是想嘗試其中一些過渡的時候，這個工具就頗有用了。這個工具能夠很容易地混合轉換不一樣方面，好比持續時間和延遲。經過這種方式，你能夠確切地看到每一個不一樣的轉換是如何工做的。

請注意，該網站還提供許多其餘工具，例如漸變和變換生成器。

2. Transfonter

Transfonter是在轉換字體時使用的工具，這樣你就能夠在web上使用它們。它支持許多不一樣的格式，好比TTF、EOT、WOFF、WOFF2和SVG。

當你擁有須要在網絡上使用的自定義字體時，此功能很是有用！

3. Flip Switch Generator

每隔一段時間，你可能須要爲正在構建的新應用程序實現一個翻轉開關。你可使用此工具爲你生成代碼，而沒必要一遍又一遍地重複勞動。

4. Flexbox.help

Flexbox.help是一個很好的工具，當你須要幫助的時候，你能夠利用Flexbox.help。若是你是flexboxes的新手，這是一個很好的工具，使用這個工具你能夠嘗試使用全部可用的flex選項，CSS會根據你選擇的選項爲你生成，因此你不須要本身輸入全部的代碼。

5. SASS to CSS

使用此工具，你能夠將SASS代碼轉換回CSS，當你須要使所編寫的SASS代碼準備好在web上使用時，這可能頗有用。

6. Pure CSS Image Effects

CSS Filter 屬性提供了在元素顯示以前對元素的渲染效果的訪問，如模糊或顏色偏移。該工具容許您試驗filter屬性所提供的全部可能性。

7. Generating Color Schemes

有時候，當你須要爲某個設計或網站尋找最佳色彩時，你會缺少靈感。當你沒有靈感的時候，你應該使用這個工具。這是一個很是優雅和易於使用的工具，爲你提供了最好的配色方案。

8. Style Guide Generator

當你在一個多人前端團隊中工做時，都很是歡迎使用此工具。它使你能夠生成樣式指南，所以不會對如何設置某些元素的樣式產生誤解。

9. Darken or Lighten a Certain Color

最後一個工具，可讓你調暗或調亮任何顏色。有不少狀況下，你有一個顏色，而後你想要一個只是有點深或淺的顏色，例如，在爲按鈕尋找背景顏色時。

如今咱們已經到了這個列表的末尾，我但願你已經學會了一兩個工具，它們可使你的生活更輕鬆一些。

你認爲這個列表中缺乏了什麼好工具嗎？讓我知道！

---

文章首發於公衆號 《前端外文精選》，私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！