IntelliJ IDEA 2025.1 Help

在 Compass 应用程序中的 Sass 和 SCSS

在 IntelliJ IDEA 中使用 Compass 支持 ，Compass 应用程序中的 Sass 或 SCSS 样式表将自动编译为 CSS。

开始之前

  1. 下载并安装 Ruby。

  2. 按照 Compass 和 File Watchers 中的描述，在 设置 | 插件 页，选项卡 Marketplace 上安装 从 JetBrains Marketplace 安装插件。

安装 Compass

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

    gem install compass

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

创建新的 Compass 应用程序

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

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

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

  • 创建一个空的 IntelliJ IDEA 项目，打开嵌入的 终端 （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. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要签出应用程序源代码的存储库。 如需更多信息，请参阅 查看项目 (克隆)。

编译 Sass 和 SCSS

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

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

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

  • 如果选中了 自动保存编辑的文件以触发观察程序 复选框，则在对源代码进行任何更改后立即调用文件监视器。

  • 如果清除 自动保存编辑的文件以触发观察程序 复选框，File Watcher 会在保存时（文件 | 全部保存、 Ctrl+S ）或当您将焦点从 IntelliJ IDEA 移开时（在界面失活时）启动。

了解更多 File Watchers。

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

创建一个 File Watcher

  1. 在 设置 对话框（Ctrl+Alt+S ）中，点击 File Watchers 下的 工具。 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. 按照 File Watchers 中的描述进行操作。

最后修改日期： 2025年 4月 24日
Sass、SCSS 和 LessStylelint