Compass 应用中的 Sass 和 SCSS

开始之前

下载并安装 Ruby。
按照从 JetBrains Marketplace 安装插件中的说明，在设置 | 插件页面、 Marketplace 选项卡上安装并启用 Compass 插件。
请确保在设置中启用了文件监视器插件。按下 Ctrl+Alt+S 以打开设置，然后选择插件。点击已安装选项卡。在搜索字段中，输入文件监视器。有关插件的更多信息，请参阅管理插件。

在嵌入式终端（Alt+F12 ）中，键入：
gem install compass
Compass 安装在与 Ruby 可执行文件和 gem.bat 文件相同的文件夹中。

如果您尚无 Compass 应用，您可以创建一个，或向空的 PyCharm 项目添加 Compass 支持。无论哪种情况，都会生成一个 conf.rb 配置文件。

在嵌入式终端（Alt+F12 ）中，键入：
compass create <the name of the application to be created>
创建一个空的 PyCharm 项目，打开嵌入式终端（Alt+F12 ），然后键入：
cd <application folder> compass init

打开一个 .sass 或 .scss 文件，点击 @import 'compass' 语句旁的红色灯泡，或按 Alt+Enter ，然后在建议列表中选择配置 Compass。
或者，在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | 样式表 | Compass。
选中启用 Compass 支持复选框，并指定 Compass 可执行文件和 conf.rb 配置文件的路径。

在欢迎屏幕左侧窗格中点击克隆。
或者，从主菜单中选择文件 | 新建 | 来自版本控制的项目…、 Git | 克隆… 或 VCS | 从版本控制获取。
在主菜单中，您可能看到的不是 Git ，而是与项目关联的其他版本控制系统。例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检出应用源代码的存储库。有关详细信息，请参阅检出项目（克隆）。

要自动编译您的代码，您需要安装编译器并配置一个 Compass Sass 或 Compass SCSS 文件监视器，用于跟踪文件更改并运行编译器。

当您打开文件时，PyCharm 会检查当前项目中是否有可用的文件监视器。如果已配置此类文件监视器但被禁用，PyCharm 会显示一个弹出窗口，告知您已配置的文件监视器，并建议启用它。

如果在当前项目中配置并启用了适用的文件监视器，PyCharm 会在新建监视器对话框中指定的事件发生时自动启动编译器。

如果选中自动保存已编辑的文件以触发监视器复选框，则在对源代码进行任何更改后会立即调用文件监视器。
如果清除自动保存已编辑的文件以触发监视器复选框，则会在保存时（文件 | 全部保存、 Ctrl+S ），或当您将焦点从 PyCharm 移开时（窗口停用时）启动文件监视器。

了解详情，请参阅文件监视器。

PyCharm 会创建一个包含生成输出的单独文件。该文件与源 Sass 或 SCSS 文件同名，扩展名为 .css 。生成文件的位置在新建监视器对话框的刷新输出路径字段中定义。不过，在项目树中，它们会显示在源文件下方，源文件此时显示为一个节点。

在设置对话框（Ctrl+Alt+S ）中，点击工具下的文件监视器。随即打开的文件监视器页面会显示已配置的文件监视器列表。
点击，或按 Alt+Insert。根据您要使用的工具，从列表中选择 compass sass 或 compass scss 预定义模板。将打开新建监视器对话框。
在程序字段中，指定可执行文件的路径：
- compass.bat （适用于 Windows）
- compass （适用于 Unix 和 macOS）
在参数字段中，根据所用操作系统输入以下之一：
- compile $UnixSeparators($ProjectFileDir$)$ 用于处理整个目录
- compile $UnixSeparators($FilePath$)$ 用于处理单个文件
- compile $ProjectFileDir$ 用于处理整个目录
- compile $ProjectFileDir$ $FilePath$ 用于处理单个文件
- compile $ProjectFileDir$ 用于处理整个目录
- compile $ProjectFileDir$ $FilePath$ 用于处理单个文件
按照文件监视器中的说明继续操作。

最后修改日期： 2025年 12月 2日