# 在 Compass 应用程序中的 Sass 和 SCSS

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件：
>
>
>
> `Compass` ，  `File Watchers`  -  在   设置 | 插件   页面上安装插件。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

> **Warning:**
> 自 IntelliJ IDEA 2020.1 起，IDE 中的 Compass 支持已被弃用。
>
>
>
> 不过，Compass 支持仍可通过  Compass  插件获得，该插件可在   设置 | 插件   页面上安装，详情请参阅 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)。

在 IntelliJ IDEA 中使用 [Compass 支持](http://compass-style.org/)，Compass 应用程序中的 Sass 或 SCSS 样式表将自动编译为 CSS。

## 开始之前

Procedure:

1. [下载并安装 Ruby](http://www.ruby-lang.org/en/downloads/)。

2. 安装  Compass  和  File Watchers  插件（位于   设置 | 插件   页面），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

## 安装 Compass

Procedure:

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`gem install compass`

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

## 创建新的 Compass 应用程序

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

Procedure:

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

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

* 创建一个空的 IntelliJ IDEA 项目，打开你的命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入：

```SHELL
cd <application folder>
compass init
                    
```

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

1. 打开  `.sass`  或  `.scss`  文件，点击  `@import 'compass'`  语句旁的红色灯泡或按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后从建议列表中选择   配置 Compass  。

> **Tip:**
> 或者，在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，转到   语言与框架 | 样式表 | Compass  。

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

## 从现有的 Compass 应用程序开始

Procedure: 打开本机上已有的应用程序源代码

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

Procedure: 从版本控制系统检出应用程序源代码

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

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

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

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

## 编译 Sass 和 SCSS

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

> **Tip:**
> 还可以从命令行使用编译器，或 [将其配置为第三方工具](configuring-third-party-tools.html)。

打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件关注者。 如果已配置此类文件关注者但其已禁用，IntelliJ IDEA 会显示一个弹出窗口，告知已配置的文件关注者并建议启用它。

如果当前项目中已配置并启用了适用的文件关注者，IntelliJ IDEA 会在 [新建关注者对话框](new-watcher-dialog.html) 中指定的事件发生时自动启动编译器。

* 如果选中 自动保存已编辑的文件以触发监视器 复选框，只要源代码发生任何更改，就会调用文件关注者。

* 如果清除 自动保存已编辑的文件以触发监视器 复选框，文件关注者会在保存时（ `文件 | 全部保存` 、 `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))）或将焦点从 IntelliJ IDEA 移开时（帧停用时）启动。

有关更多信息，请参阅 [File Watchers](using-file-watchers.html)。

IntelliJ IDEA 会创建一个包含生成输出的单独文件。 文件名称为源 Sass 或 SCSS 文件名，并带有扩展名  `.css` 。 生成的文件的位置在 [新建关注者对话框](new-watcher-dialog.html) 的   要刷新的输出路径   字段中定义。 不过，在   项目树   中，它们显示在源文件下方，该源文件现在显示为一个节点。

Procedure: 创建一个 File Watcher

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，点击   File Watchers   下的   工具  。 [File Watchers 页面](settings-tools-file-watchers.html) 显示了已配置的 File Watchers 列表。

2. 点击 ![添加按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 或按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))。 根据 您 将要使用的工具，从列表中选择   compass sass   或   compass scss   预定义模板。 [New Watcher](new-watcher-dialog.html)对话框打开。

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

* `compass.bat` 适用于 Windows

* `compass` 适用于 Unix 和 macOS

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

Windows:

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

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

macOS:

* `compile $ProjectFileDir$` 处理整个目录

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

Linux (Ubuntu):

* `compile $ProjectFileDir$` 处理整个目录

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

5. 按照 [File Watchers](using-file-watchers.html) 中的说明进行操作。

## See also

### 过程

[File Watchers](using-file-watchers.html) [压缩 CSS](compressing-css.html) [Sass、SCSS、Less 和 PostCSS](transpiling-sass-less-and-scss-to-css.html) [Stylus](transpiling-stylus-to-css.html)

### 参考

[File Watchers](settings-tools-file-watchers.html) [新建监视器对话框](new-watcher-dialog.html)

### 外部链接

[http://compass-style.org/](http://compass-style.org/)