IntelliJ IDEA：Compass应用程序中的Sass和SCSS

Compass应用程序中的Sass和SCSS

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

IntelliJ IDEA与Compass框架集成，因此Compass应用程序中的Sass或SCSS样式表可以即时编译成CSS。

使用准备

1. 下载并安装Ruby。

2. 如“管理插件”中所述， 在“插件”页面上安装并启用“文件监视器”存储库插件。 

安装Compass

• 打开嵌入式终端（Alt+F12）并在命令提示符下键入gem install compass。Compass安装在存储Ruby可执行文件和gem.bat文件的文件夹中。

从IntelliJ IDEA中的Compass应用程序开始

如果您还没有Compass应用程序，则可以创建它或向现有IntelliJ IDEA项目添加Compass支持。在任何一种情况下，都会生成conf.rb配置文件。

创建新的Compass应用程序

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

将Compass添加到现有的IntelliJ IDEA项目

1. 打开包含要使用Compass的代码的文件夹（单击“欢迎”界面上的“打开”或在主菜单上选择：文件|打开）。

2. 打开嵌入式终端（Alt+F12），然后键入：

   cd <application folder>
   compass init

打开计算机上已有的应用程序源

• 单击“欢迎”屏幕上的“打开”或在主菜单上选择：文件|打开。在打开的对话框中，选择存储源的文件夹。

从版本控制中检出应用程序源

1. 单击“欢迎”屏幕上的“从版本控制中签出”或选择主菜单上的：VCS|从版本控制中查看。

2. 从列表中选择您的版本控制系统。

3. 在打开的特定于VCS的对话框中，键入您的凭据和存储库以检出应用程序源。

在应用程序中激活Compass感知支持

1. 打开.sass或.scss文件，单击@import 'compass'语句旁边的红色灯泡或按下Alt+Enter，然后从建议列表中选择“配置Compass”。

2. 选中“启用Compass支持”复选框，并指定Compass可执行文件和conf.rb配置文件的路径。

或者，你也可以在“设置/首选项”对话框（Ctrl + Alt + S）中，转到：语言和框架|样式表|Compass。

编译Sass和SCSS

要动态编译代码，需要将编译器配置为IntelliJ IDEA文件监视器。

提示：您也可以从命令行使用编译器或将其配置为第三方工具。

创建文件监视器

1. 在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“工具”下的“文件监视器”。打开的“文件监视器”页面显示已配置的文件监视器列表。

2. 单击或按下Alt+Insert。根据您要使用的工具，从列表中选择compass sass或compass scss预定义模板。将打开新的观察器对话框。

3. 在“程序”文本框中，指定可执行文件的路径：

   • 适用于Windows：compass.bat

   • 适用于Unix和macOS：compass

4. 在“参数”文本框中，根据使用的操作系统键入以下内容之一：
   • 对于macOS：

     • compile $ProjectFileDir$用于处理整个目录

     • compile $ProjectFileDir$ $FilePath$用于处理单个文件

   • 对于Windows：

     • compile $UnixSeparators($ProjectFileDir$)$用于处理整个目录

     • compile $UnixSeparators($FilePath$)$用于处理单个文件

   • 对于Linux（Ubuntu）：

     • compile $ProjectFileDir$用于处理整个目录

     • compile $ProjectFileDir$ $FilePath$用于处理单个文件

5. 按照使用文件监视器中的说明继续操作。

编译代码

当您打开文件时，IntelliJ IDEA会检查当前项目中是否有适用的文件观察器。如果配置但禁用了此类文件观察器，IntelliJ IDEA将显示一个弹出窗口，通知您已配置的文件观察程序并建议启用它。

如果在当前项目中配置并启用了适用的文件观察器，则IntelliJ IDEA会在“新建观察器”对话框中指定的事件时自动启动它。

• 如果选中“自动保存已编辑的文件以触发观察器”复选框，则只要对源代码进行任何更改，就会调用“文件观察器”。
• 如果“自动保存已编辑的文件以触发观察器”复选框被清除，文件观察器是在保存（文件|全部保存，Ctrl+S），或者当你从IntelliJ IDEA移动对焦（帧停用时）启动。

IntelliJ IDEA使用生成的输出创建单独的文件。该文件具有源Sass或SCSS文件的名称和扩展名css。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是，在项目树中，它们显示在源文件下，该文件现在显示为节点。