對很多網(wǎng)站建設前端工程師來說，Sass 是接觸到的初始編譯系統(tǒng)，或者說是任務處理器。在這之前，我們的工作方式通常是修改 CSS 文件然后刷新瀏覽器。Sass 打開了自動化處理的大門。有些人可能會認為我們只是在工作流中多增加了一條指令，但對于那些初始發(fā)現(xiàn) Sass 的人來說，這個小小的任務是非常值得一試的。

 

Compass 讓我們不僅發(fā)現(xiàn) CSS3 的混入可以節(jié)省很多查詢 CSS3 樣式生成器的時間，還認識到了項目中配置文件的作用。有了 Compass，我們可以創(chuàng)建一個 config.rb 文件，用來描述重要文件夾的路徑、指定開發(fā)環(huán)境與線上環(huán)境的設置，并綁定重要的調試工具。這個配置文件可以保留并分享給團隊的其他人，讓新人更容易上手。

 

隨著 Sass 社區(qū)的發(fā)展，越來越多的 Compass 插件涌現(xiàn)出來，從先進的顏色函數(shù)到柵格系統(tǒng)、布局比例工具、媒體查詢管理，等等。這些工具都作為 gem 組件發(fā)布，可以直接導入任何一個使用 Compass 的項目中。

 

Compass 還可以讓模塊開發(fā)者使用 Ruby 的功能，比如訪問本地文件、執(zhí)行 Ruby 函數(shù)、編譯 Ruby 模板和把數(shù)據(jù)傳遞回 Sass 文件。這允許用戶在模塊中進行復雜的數(shù)學運算，而這是單獨使用 Sass 所無法實現(xiàn)的。Compass 還具備這樣的功能：用不同文件夾中的 PNG 圖片生成雪碧圖，或獲取圖片文件的寬度和高度。

 

如今只用一條 compass compile 指令，開發(fā)人員就可以把所有的 Sass 文件編譯到目標 CSS 所在的目錄，并且圖片和字體都分別指向各自的路徑。Sass 文件可以使用流行的框架來編譯，如 Susy grids、Modular Scale、Breakpoint 和 Color Schemer。Compass 在創(chuàng)建若干個自定義的雪碧圖，批量獲取圖片的尺寸，并在 CSS 中設置它們的高度和寬度時，就會完成上述的工作。

 

Compass 不僅是我們對編譯系統(tǒng)的初始接觸，也是很多人不愿使用很火的新型 Node.js 任務處理器的首要原因。簡單了解 Grunt 和 Gulp 這類工具之后，很多人（包括我）的先反應都是：“噢，這跟 Compass 差不多，只是更復雜些而已。”對于一個完全使用 Compass 來構建編譯流程的開發(fā)人員來說，配置 Grunt 來編譯 Sass 像是一個完全不必要的步驟。然而，一旦配置好 Gulp 或 Grunt 來編譯 Sass，我們就開始關注其他可做的事情，并且很快意識到我們的編譯流程與之前相比還是有所不同的。

 

以上是日照網(wǎng)站建設公司（昊諾網(wǎng)絡公司）分享，如果大家喜歡該網(wǎng)絡知識，請關注我們的網(wǎng)站動態(tài)！