WebStorm 2025.2 Help

Compass 应用中的 Sass 与 SCSS

在 WebStorm 中启用 Compass 支持 后，Compass 应用中的 Sass 或 SCSS 样式表将自动编译为 CSS。

开始之前

  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 应用，您可以创建它或将 Compass 支持添加到空的 WebStorm 项目中。 在这两种情况下，都会生成一个 conf.rb 配置文件。

  • 在嵌入的 终端 （Alt+F12 ）中输入：

    compass create <the name of the application to be created>

  • 如 创建项目 中所述，创建空 WebStorm 项目，打开嵌入的 终端 （Alt+F12 ），并输入：

    cd <application folder> compass init

在应用中启用 Compass 感知支持

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

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

从现有 Compass 应用开始

打开已保存在计算机中的应用源代码

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

从版本控制中检出应用源代码

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

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

    主菜单中可能显示与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出应用源代码的存储库。 如需了解更多信息，请参阅 检出项目（克隆）。

编译 Sass 与 SCSS

要使代码自动编译，您需要安装编译器并配置一个 Compass Sass 或 Compass SCSS File Watcher ，以跟踪文件更改并运行编译器。

打开文件时，WebStorm 会检查当前项目中是否可用相应的 File Watcher。 如果配置了该 File Watcher 但未启用，WebStorm 会显示弹出窗口，提示您相关信息并建议启用。

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

  • 如果选中 自动保存已编辑的文件以触发监视程序 复选框，则每当对源代码进行更改时，File Watcher 会立即被调用。

  • 如果未选中 自动保存已编辑的文件以触发监视程序 复选框，则 File Watcher 会在保存（文件 | 全部保存、 Ctrl+S ）或将焦点从 WebStorm 移出（窗口失焦）时启动。

如需进一步了解，请参阅 文件监视器。

WebStorm 会创建一个包含生成输出的独立文件。 该文件的名称与源 Sass 或 SCSS 文件相同，扩展名为 .css 。 生成文件的位置在 要刷新的输出路径 字段中定义，该字段位于 “新建监视器”对话框中。 但在 项目树 中，它们显示在作为节点显示的源文件下。

创建 File Watcher

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

  2. 点击 添加按钮 或按下 Alt+Insert。 根据所使用的工具，从列表中选择 compass sass 或 compass scss 预定义模板。 将打开 “新建监视器”对话框。

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

    • 适用于 Windows 的 compass.bat

    • 适用于 Unix 和 macOS 的 compass

  4. 在 参数 字段中，根据所用操作系统输入以下其中一个选项：

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

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

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

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

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

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

  5. 请按照 文件监视器 中所述继续操作。

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