免费AI编程助手
IntelliJ IDEA：Compass应用程序中的Sass和SCSS
Compass应用程序中的Sass和SCSS
此功能仅在Ultimate版本中受支持。
IntelliJ IDEA与Compass框架集成，因此Compass应用程序中的Sass或SCSS样式表可以即时编译成CSS。
使用准备
如“管理插件”中所述， 在“插件”页面上安装并启用“文件监视器”存储库插件。
安装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项目
打开包含要使用Compass的代码的文件夹（单击“欢迎”界面上的“打开”或在主菜单上选择：文件|打开）。
打开嵌入式终端（Alt+F12），然后键入：
cd <application folder> compass init
打开计算机上已有的应用程序源
单击“欢迎”屏幕上的“打开”或在主菜单上选择：文件|打开。在打开的对话框中，选择存储源的文件夹。
从版本控制中检出应用程序源
单击“欢迎”屏幕上的“从版本控制中签出”或选择主菜单上的：VCS|从版本控制中查看。
从列表中选择您的版本控制系统。
在打开的特定于VCS的对话框中，键入您的凭据和存储库以检出应用程序源。
在应用程序中激活Compass感知支持
打开
.sass或.scss文件，单击@import 'compass'语句旁边的红色灯泡或按下Alt+Enter，然后从建议列表中选择“配置Compass”。选中“启用Compass支持”复选框，并指定Compass可执行文件和conf.rb配置文件的路径。
或者，你也可以在“设置/首选项”对话框（Ctrl + Alt + S）中，转到：语言和框架|样式表|Compass。
编译Sass和SCSS
要动态编译代码，需要将编译器配置为IntelliJ IDEA文件监视器。
提示：您也可以从命令行使用编译器或将其配置为第三方工具。
创建文件监视器
在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“工具”下的“文件监视器”。打开的“文件监视器”页面显示已配置的文件监视器列表。
单击
或按下Alt+Insert。根据您要使用的工具，从列表中选择compass sass或compass scss预定义模板。将打开新的观察器对话框。- 在“程序”文本框中，指定可执行文件的路径：
适用于Windows：compass.bat
适用于Unix和macOS：compass
- 在“参数”文本框中，根据使用的操作系统键入以下内容之一：
- 对于macOS：
compile $ProjectFileDir$用于处理整个目录compile $ProjectFileDir$ $FilePath$用于处理单个文件
- 对于Windows：
compile $UnixSeparators($ProjectFileDir$)$用于处理整个目录compile $UnixSeparators($FilePath$)$用于处理单个文件
- 对于Linux（Ubuntu）：
compile $ProjectFileDir$用于处理整个目录compile $ProjectFileDir$ $FilePath$用于处理单个文件
- 对于macOS：
按照使用文件监视器中的说明继续操作。
或按下Alt+Insert。根据您要使用的工具，从列表中选择compass sass或compass scss预定义模板。将打开新的观察器对话框。编译代码
当您打开文件时，IntelliJ IDEA会检查当前项目中是否有适用的文件观察器。如果配置但禁用了此类文件观察器，IntelliJ IDEA将显示一个弹出窗口，通知您已配置的文件观察程序并建议启用它。
如果在当前项目中配置并启用了适用的文件观察器，则IntelliJ IDEA会在“新建观察器”对话框中指定的事件时自动启动它。
- 如果选中“自动保存已编辑的文件以触发观察器”复选框，则只要对源代码进行任何更改，就会调用“文件观察器”。
- 如果“自动保存已编辑的文件以触发观察器”复选框被清除，文件观察器是在保存（文件|全部保存，Ctrl+S），或者当你从IntelliJ IDEA移动对焦（帧停用时）启动。
IntelliJ IDEA使用生成的输出创建单独的文件。该文件具有源Sass或SCSS文件的名称和扩展名css。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是，在项目树中，它们显示在源文件下，该文件现在显示为节点。
更多建议：