55+ CSS 工具：預處理器、插件、編輯器和漸變生成器

已發表: 2016-12-30

CSS 代表層疊樣式表。 CSS 是一種與 HTML 一起用於設計網頁的標記語言。 HTML 頁面看起來不太好，但使用 CSS，您可以使它們看起來漂亮而有吸引力。如果你打算學習 WordPress 主題開發，首先你應該學習 HTML 和 CSS。

主題開發工具系列的更多文章

WordPress開發工具系列主頁
下載 15 本免費書籍來掌握 HTML、CSS、JavaScript、jQuery、Bootstrap 和 WordPress
Web 開發人員的 30 多個最佳 Chrome、Firefox 擴展、教程和工具的終極列表
38 個免費視頻課程，學習 HTML、CSS、PHP、jQuery、JavaScript、Git 等

在本文中，我們將為初學者和高級 WordPress 開發人員分享最好的 CSS 工具。如果您是絕對初學者並且對 HTML 或 CSS 一無所知，您可以下載 38 門免費課程和 15 本書免費電子書，從頭開始學習 HTML、CSS 和其他編程語言。

12 個 CSS 工具：CSS 預處理器、應用程序和插件

Less CSS ：Less 是一個 CSS 預處理器，這意味著它擴展了 CSS 語言，添加了允許變量、mixin、函數和許多其他技術的功能，這些技術使您可以使 CSS 更易於維護、主題化和可擴展。
SASS號稱是世界上最成熟、最穩定、最強大的專業級CSS擴展語言。 SASS 已經有將近十年的歷史了，使用 Sass 構建的框架數不勝數，包括 Compass、Bourbon 和 Susy 等等。
Stylus是一個 CSS 預處理器，它擴展了常規 CSS 的功能。提供強大的邏輯功能，通過 Node.js / JavaScript 運行的能力，（無 Ruby），作為 Node.js 設置的一部分運行的能力，乾淨和最小但靈活的語法。
CodeKit（32 美元）是一款功能強大且深受 MAC 用戶歡迎的應用程序。 CodeKit 可以編譯 Less、Sass、Stylus、CoffeeScript、Typescript、Jade、Haml、Slim、Markdown 和 Javascript。提供自動刷新瀏覽器和內置的 Bower，您可以通過單擊安裝 6,000 多個組件，包括 Bootstrap、jQuery、Modernizr、Zurb Foundation，甚至 WordPress。
PrePros（29 美元） ：Prepros 是一個高級工具，用於編譯 LESS、Sass、Compass、Stylus、Jade 等等，帶有自動 CSS 前綴，它帶有用於跨瀏覽器測試的內置服務器。它適用於 Windows、Mac OS X 和 Linux。它提供自動 CSS 前綴、自動瀏覽器刷新、文件縮小、圖像優化、內置服務器和許多其他功能。
Emmet ：一個免費的插件，供不同的代碼編輯器快速輕鬆地編寫代碼。 Emmet 是用純 JavaScript 編寫的，可以跨不同平台工作：Web 瀏覽器、Node.js、Microsoft WSH 和 Mozilla Rhino。
Fire.App ：適用於 Windows 的類似 CodeKit 的工具是 fire.app（它也可以在 Linux 和 Mac 上運行）。喜歡 Sass/Compass 但討厭命令行界面？ Fire.app 像我們的 Compass.app 一樣具有一流的 Sass/Compass 支持。不再有供應商 CSS 前綴和手工製作的精靈圖像！。 Fire.app 適用於 Mac、Linux 和 Windows 平台。安裝過程就像單擊和拖動一樣簡單。
Snippets是一個免費的代碼管理程序。幫助您在不同的項目中組織和重用代碼片段，公開和與您的團隊共享代碼片段。這適用於 Mac 和 Windows。
Koala App是一個用於 Less、Sass、Compass 和 CoffeeScript 編譯的 GUI 應用程序，以幫助 Web 開發人員更有效地使用它們。 Koala 可以在 Windows、Linux 和 Mac 上運行。
LiveReload CSS 編輯和圖像更改實時應用。 CoffeeScript、SASS、LESS 和其他都可以正常工作。 LiveReload 監視文件系統中的變化。保存文件後，會根據需要對其進行預處理，並刷新瀏覽器。
Scout App是一個跨平台的應用程序，它將 Sass & Compass 的強大功能交付給網頁設計師。 Scout 通過提供更多的控制、優化和組織，幫助您的 CSS 工作流程變得輕而易舉。
Crunch 2 Crunch 允許您編寫 Less、Sass、CoffeeScript、Markdown*，然後在您進行更改後自動保存 CSS、JavaScript 和 HTML。想只寫純 CSS 嗎？ XML？哈斯克爾？ MUSH代碼？ Crunch 也可以讓你這樣做。 Crunch 2 是一個編輯器，可以讓你做你想做的事。因為 Crunch 愛你。

10 個 WordPress 自定義 CSS 插件

如果您想在 WordPress 中自定義 CSS，您可以使用自 WordPress 4.7 起在自定義程序中提供的許多免費插件或內置的編輯 CSS 功能。我們整理了一份免費的 10 個免費 CSS 插件列表，可幫助您輕鬆修改和保存自定義 CSS。

您還可以閱讀本教程以了解如何使用 Chrome 開發人員工具在 WordPress 主題中編輯 CSS 以及如何在不使用 jQuery 或 PHP 的情況下使用 CSS 在 WordPress 菜單中添加箭頭。

15 個 CSS 漸變生成器

colorzilla 漸變編輯器
cssmatic漸變編輯器
憤怒的工具梯度生成器
gradientgenerator.com/
css3generator.com/
cssportal 梯度生成器
uigradients.com：準備使用漂亮的顏色漸變
css3factory 線性漸變
gradcolor漸變生成器
perbang RGB漸變
paintbycode 漸變生成器
virtuosoft 梯度生成器
westciv 徑向漸變
westciv 線性漸變
CSS3 漸變生成器

10 個免費的在線 CSS 編輯器

CSS Portal 的在線 CSS 編輯器
CSSdeck 實驗室
ScratchPad 實時 HTML 和 CSS 編輯器
EnjoyCSS 的在線 CSS3 代碼生成器
cssdesk
jsfiddle : 在線測試你的 JavaScript、CSS、HTML 或 CoffeeScript
CSSmate 編輯器
CSS 美化和縮小
liveweave HTML5、CSS3 和 JavaScript 遊樂場
SelfCSS – 所見即所得的 CSS 編輯器

10個Chrome擴展修改CSS

瀏覽器
風格機器人
用戶 CSS
實時 CSS 編輯器
開發工具自動保存
保存 CSS
響應式網頁設計測試員
響應式檢查員
視口調整器
選項卡調整大小 - 分屏佈局

最後的話

這就是針對 Web 設計人員和開發人員的 CSS 工具列表的全部內容。您可以使用這些免費的 CSS 工具輕鬆自定義樣式並保存更改。 Chrome 擴展對於保存您的 CSS 編輯非常有用，無需離開 chrome 開發人員工具。

使用 CSS 預處理器，您可以高效地編寫 CSS。我希望，你會喜歡這些工具。本文是我們主題開發工具系列的一部分。不要忘記加入我們的 WordPress 主題開發時事通訊以下載免費書籍並接收有關 WordPress 主題開發的最新文章和教程。

注意：本文最初發表於 createwptheme.com，經授權我們已在此處重新發布。