IntelliJ IDEA：Compass應(yīng)用程序中的Sass和SCSS

Compass應(yīng)用程序中的Sass和SCSS

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA與Compass框架集成，因此Compass應(yīng)用程序中的Sass或SCSS樣式表可以即時編譯成CSS。

使用準(zhǔn)備

1. 下載并安裝Ruby。

2. 如“管理插件”中所述， 在“插件”頁面上安裝并啟用“文件監(jiān)視器”存儲庫插件。 

安裝Compass

• 打開嵌入式終端（Alt+F12）并在命令提示符下鍵入gem install compass。Compass安裝在存儲Ruby可執(zhí)行文件和gem.bat文件的文件夾中。

從IntelliJ IDEA中的Compass應(yīng)用程序開始

如果您還沒有Compass應(yīng)用程序，則可以創(chuàng)建它或向現(xiàn)有IntelliJ IDEA項(xiàng)目添加Compass支持。在任何一種情況下，都會生成conf.rb配置文件。

創(chuàng)建新的Compass應(yīng)用程序

• 打開嵌入式終端（Alt+F12），然后在命令提示符下鍵入compass create <the name of the application to be created>。

將Compass添加到現(xiàn)有的IntelliJ IDEA項(xiàng)目

1. 打開包含要使用Compass的代碼的文件夾（單擊“歡迎”界面上的“打開”或在主菜單上選擇：文件|打開）。

2. 打開嵌入式終端（Alt+F12），然后鍵入：

   cd <application folder>
   compass init

打開計算機(jī)上已有的應(yīng)用程序源

• 單擊“歡迎”屏幕上的“打開”或在主菜單上選擇：文件|打開。在打開的對話框中，選擇存儲源的文件夾。

從版本控制中檢出應(yīng)用程序源

1. 單擊“歡迎”屏幕上的“從版本控制中簽出”或選擇主菜單上的：VCS|從版本控制中查看。

2. 從列表中選擇您的版本控制系統(tǒng)。

3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲庫以檢出應(yīng)用程序源。

在應(yīng)用程序中激活Compass感知支持

1. 打開.sass或.scss文件，單擊@import 'compass'語句旁邊的紅色燈泡或按下Alt+Enter，然后從建議列表中選擇“配置Compass”。

2. 選中“啟用Compass支持”復(fù)選框，并指定Compass可執(zhí)行文件和conf.rb配置文件的路徑。

或者，你也可以在“設(shè)置/首選項(xiàng)”對話框（Ctrl + Alt + S）中，轉(zhuǎn)到：語言和框架|樣式表|Compass。

編譯Sass和SCSS

要動態(tài)編譯代碼，需要將編譯器配置為IntelliJ IDEA文件監(jiān)視器。

提示：您也可以從命令行使用編譯器或?qū)⑵渑渲脼榈谌焦ぞ摺?/p>

創(chuàng)建文件監(jiān)視器

1. 在“設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，單擊“工具”下的“文件監(jiān)視器”。打開的“文件監(jiān)視器”頁面顯示已配置的文件監(jiān)視器列表。

2. 單擊或按下Alt+Insert。根據(jù)您要使用的工具，從列表中選擇compass sass或compass scss預(yù)定義模板。將打開新的觀察器對話框。

3. 在“程序”文本框中，指定可執(zhí)行文件的路徑：

   • 適用于Windows：compass.bat

   • 適用于Unix和macOS：compass

4. 在“參數(shù)”文本框中，根據(jù)使用的操作系統(tǒng)鍵入以下內(nèi)容之一：
   • 對于macOS：

     • compile $ProjectFileDir$用于處理整個目錄

     • compile $ProjectFileDir$ $FilePath$用于處理單個文件

   • 對于Windows：

     • compile $UnixSeparators($ProjectFileDir$)$用于處理整個目錄

     • compile $UnixSeparators($FilePath$)$用于處理單個文件

   • 對于Linux（Ubuntu）：

     • compile $ProjectFileDir$用于處理整個目錄

     • compile $ProjectFileDir$ $FilePath$用于處理單個文件

5. 按照使用文件監(jiān)視器中的說明繼續(xù)操作。

編譯代碼

當(dāng)您打開文件時，IntelliJ IDEA會檢查當(dāng)前項(xiàng)目中是否有適用的文件觀察器。如果配置但禁用了此類文件觀察器，IntelliJ IDEA將顯示一個彈出窗口，通知您已配置的文件觀察程序并建議啟用它。

如果在當(dāng)前項(xiàng)目中配置并啟用了適用的文件觀察器，則IntelliJ IDEA會在“新建觀察器”對話框中指定的事件時自動啟動它。

• 如果選中“自動保存已編輯的文件以觸發(fā)觀察器”復(fù)選框，則只要對源代碼進(jìn)行任何更改，就會調(diào)用“文件觀察器”。
• 如果“自動保存已編輯的文件以觸發(fā)觀察器”復(fù)選框被清除，文件觀察器是在保存（文件|全部保存，Ctrl+S），或者當(dāng)你從IntelliJ IDEA移動對焦（幀停用時）啟動。

IntelliJ IDEA使用生成的輸出創(chuàng)建單獨(dú)的文件。該文件具有源Sass或SCSS文件的名稱和擴(kuò)展名css。生成的文件的位置在“新建觀察器”對話框的“要刷新的輸出路徑”文本框中定義。但是，在項(xiàng)目樹中，它們顯示在源文件下，該文件現(xiàn)在顯示為節(jié)點(diǎn)。