15 個相當好用的 Sass 和 Compass 工具

2016-11-02

3291

常聽開發者說用了 Sass 後就回不去了，到底它特別在哪呢? 撰寫純 CSS 時常發現有很多樣式重複，一遇上設計改版就頭大，更別提是共同開發維護。運用 Sass 搭配 Compass 可以幫助你的專案容易維護、新增以及擴充功能。

Sass 是 CSS 的擴展，添加嵌套規則、變量、mixin 函數等等。它減輕了組織以及維護 CSS 代碼的負擔，同時還將 Sass 代碼編譯為正確格式化的 CSS。而 Compass 是一個開源的 CSS 框架，使得使用 CSS3 和熱門的設計模式比以往任何時候都更容易。Compass 專門與 Sass 合作，幫助您編寫更乾淨、更快速的 CSS 代碼。

在本文中，我們收集了一些有用的 Sass 和 Compass 工具，可以幫助您快速構建動態 Web 應用程式，以致排除不必要的麻煩。就讓我們來看看有哪些出色的工具！

01.Compass.app

Compass 是一個樣式表創作框架，可幫助樣式表和標記更易於構建和維護。有了 Compass 它讓你寫入的樣式表成為 Sass 而不是純 CSS。Compass.app 是一個只有 Sass 和 Compass 應用程式的選單工具欄。主要幫助設計人員輕鬆編譯樣式表而無需借助命令行界面。Compass.app 是用 Java（JRuby）編寫的，可以在 Mac、linux 和 PC 上運行。無需安裝 Ruby 環境來使用它。

02.Scout

Scout 是一個跨平台的應用程式，在自包含的 Ruby 環境中運行 Sass 和 Compass，讓您可以透過點擊輕鬆管理所有 Sass 項目。永遠不必擔心 Ruby 設置或處理技術問題。Scout 可快速完成所有繁重的工作，讓您有更多的時間做自己喜歡的事情。

03.Codekit

Codekit 是一個強大的編譯器，可自動處理 Sass、Compass、Less、Stylus、Jade、Haml、Slim、CoffeeScript 以及 Javascript 文件。使用即時瀏覽載入方式來讓圖片優化且容易調試。它使得 Sass 和 Compass 變成一項輕而易舉的工作。該應用程式還提供團隊協作，並透過結合及縮小文件來幫助減少載入時間。

04.Archetype

Archetype 是一個用於建立可配置，可組合的 UI 模式和組件的 Compass/Sass 框架。它有良好的說明文件，並使用自然語言語法。

05.Susy

Susy 為 Compass 提供響應式網格，填充網格被 Compass 取代時留下的空隙。你可以快速為新佈局添加媒體查詢斷點（Media-query breakpoints），或使用 Susy 的網格助手陣列建立自己的項目，它有能力幫助你在幾分鐘內建構一個網站，或創建一個用於大型項目可擴展的網格庫。

06.The Saasway

Saasway 涵蓋了使用 Sass 和 Compass 用來編寫 CSS 的最新訊息和主題，包括適合初學者和進階用戶的文章、資源和教學。

07.Sassaparilla

Sassaparilla 使用 Sass 和 Compass 更快的啟動響應式 Web 項目。它主要功能集中在特殊的直向排版上，並且允許你在 ems 中編輯時使用 px，消除了設計師經常需要做的很多數學項目。它支持使用 Sass 的變量，像是顏色等。

08.LivingStyleGuide

Living Style Guide Gem 是一種使用 Sass 和 Compass 創建前端樣式導向的簡單方法。只需添加 Markdown 到您的 Sass 來創造出您的導引。

09.Pondasee

Pondasee 幫助前端設計人員加快了他們 Web 應用程式的工作流程。它不僅是一個 CSS 框架，更是一個前端入門工具包結合 SCSS 和 Compass 的力量來幫助構建一個模板。

10.LiveReload

LiveReload 常駐在您的選單欄中，並監視文件系統中的更動。一旦儲存文件，就會根據需要進行預先處理，並重新整理瀏覽器。它附帶 SASS、Compass、LESS、Stylus、CoffeeScript、IcedCoffeeScript、Eco、SLIM、HAML 和 Jade，並由兩個主要的複選框控制，讓你不會感覺到混亂。

11.Koala

Koala 是一個 GUI 應用程式，用於 CoffeeScript、Compass、Less 和 Sass 編譯，以使您成為更高效的 Web 開發人員。它在 Mac、Linux 和 Windows 上運行，包括即時編譯，多語言支援等。

12.Bootstrap Sass

Bootstrap-Sass 是一個基於 Saas 的 Bootstrap 版本，完美適用於 Sass 提供的應用程式。它可以安裝在 Rails、Compass 或 Sass-only。

13.Forge

Forge 是一個免費的命令行工具包，用於在使用前端語言（如 Sass，LESS 和 CoffeeScript）的環境中引導和開發 WordPress 主題。Forge 使用乾淨簡單的架構（基本模板文件，SCSS 文件和主題選項）建立整齊有序的源文件夾。在保存更改並處理主題時，源文件夾將自動編譯到本地 WordPress 安裝。

14.Prepros

Prepros 是一個致力於使編譯代碼更容易的應用程式。它即時編譯所有的 Sass、Scss、Compass、Less、Jade，Haml 和 CoffeeScript，即時刷新瀏覽器以保持您的無縫處理工作流程。它具有內建的 HTTP 服務器、後台文件監視、錯誤通知和即時 CSS 注入用來保持其高度獨立性能。