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

0
1833

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

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

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

01.Compass.app

compassapp

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

02.Scout

scout

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

03.Codekit

codekit

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

04.Archetype

archetype

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

05.Susy

susy

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

06.The Saasway

the-sass-way

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

07.Sassaparilla

sassaparilla

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

08.LivingStyleGuide

livingstyle

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

09.Pondasee

pondasee

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

10.LiveReload

livereload

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

11.Koala

koala2

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

12.Bootstrap Sass

bootstrap-saas

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

13.Forge

forge

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

14.Prepros

prepros

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

15.Breakpoint

breakpoint

Breakpoint 使得在 Sass 中編寫媒體查詢超簡單 – 只需使用簡化的語法建立一個變量,基於最常用的媒體查詢,然後使用「Breakpoint」mixin 調用它。Breakpoint 處理所有的繁重工作,從編寫媒體查詢本身到處理跨瀏覽器兼容性問題。