PyCharm 2025.2 Help

在 Compass 应用程序中的 Sass 和 SCSS

开始之前

  1. 下载并安装 Ruby。

  2. 按照 从 JetBrains Marketplace 安装插件 中的描述，在 设置 | 插件 页面、 Marketplace 选项卡上安装并启用 Compass 插件。

  3. 请确保在设置中启用了 File Watchers 插件。 按 Ctrl+Alt+S 打开设置，然后选择 插件。 点击 已安装 选项卡。 在搜索字段中，输入 File Watchers。 有关插件的更多信息，请参阅 插件管理。

安装 Compass

  • 在嵌入的 终端 (Alt+F12 )中，输入：

    gem install compass

    Compass 安装在 Ruby 可执行文件和 gem.bat 文件存储的文件夹中。

创建新的 Compass 应用程序

如果您还没有 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

在您的应用程序中激活 Compass-aware 支持

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

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

从现有的 Compass 应用程序开始

打开您机器上已有的应用程序源代码

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

从您的版本控制中检出应用程序源代码

  1. 在 欢迎 屏幕上点击 克隆仓库克隆。

    或者，从主菜单中选择 文件｜新建｜ 来自版本控制的项目… 或 Git ｜ 克隆… 或 VCS | 从版本控制系统获取。

    您可能会看到与您的项目相关联的其他版本控制系统，而不是在主菜单中的 Git。 例如， Mercurial 或 Perforce。

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。

编译 Sass 和 SCSS

要自动编译代码，您需要安装编译器并配置 Compass Sass 或 Compass SCSS File Watcher ，该工具将跟踪文件的更改并运行编译器。

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

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

  • 如果选中了 自动保存已编辑的文件以触发监视器 复选框，一旦对源代码进行了任何更改，就会调用 File Watcher。

  • 如果 自动保存已编辑的文件以触发监视器 复选框被清除，File Watcher 会在保存时（文件 | 全部保存， Ctrl+S ）或当您将焦点从 PyCharm 移开时（当框架失去焦点时）启动。

请从 文件监视器 了解更多。

PyCharm 会创建一个包含生成输出的单独文件。 文件名称为源 Sass 或 SCSS 文件名，并带有扩展名 .css 。 生成文件的位置在 要刷新的输出路径 字段中定义，在 新建监视器对话框中。 但是，在 项目树 中，它们显示在源文件下，现在作为一个节点显示。

创建文件监视器

  1. 在 设置 对话框（Ctrl+Alt+S ）中，点击 文件监视器 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。

  2. 点击 添加按钮 或按 Alt+Insert。 根据 您 将要使用的工具，从列表中选择 compass sass 或 compass scss 预定义模板。 New Watcher对话框打开。

  3. 在 程序 字段中，指定可执行文件的路径：

    • compass.bat 适用于 Windows

    • 指南针 适用于 Unix 和 macOS

  4. 在 参数 字段中，根据使用的操作系统键入以下其中之一：

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

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

    • compile $ProjectFileDir$ 处理整个目录

    • compile $ProjectFileDir$ $FilePath$ 以处理单个文件

    • compile $ProjectFileDir$ 处理整个目录

    • compile $ProjectFileDir$ $FilePath$ 以处理单个文件

  5. 请按照 文件监视器 中的描述进行操作。

最后修改日期： 2025年 9月 26日
Sass、SCSS 和 LessStylelint