# Sass、SCSS、Less 和 PostCSS

> 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)。
>
>
>
> 所需插件  :
>
>
>
> `CSS`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `File Watchers` 、  `Less`  或  `Sass` 、  `PostCSS`  -  在   设置 | 插件   页面上安装插件。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

IntelliJ IDEA 集成了将 [Sass](https://sass-lang.com/)、 [Less](http://lesscss.org/) 和 [SCSS](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax) 代码转换为 [CSS](https://www.w3.org/Style/CSS/) 的编译器。 要在 IntelliJ IDEA 中使用编译器，您需要根据相关的预定义模板将其配置为 [File Watcher](using-file-watchers.html)。

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

## 开始之前

Procedure:

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 安装并启用  File Watchers  插件，在   设置 | 插件   页面上操作，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。

3. 确保  File Watchers  以及  Less  或  Sass  所需插件已在   设置 | 插件   页面上启用。 如需更多信息，请参阅 [管理插件](managing-plugins.html)。

## 安装 Sass/SCSS

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))）中输入：

`npm install -g sass`

了解更多信息，请访问 [Sass 官方网站](https://sass-lang.com/install)。

## 安装 Less

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))）中输入：

`npm install --global less`

详细了解请访问 [Less 官方网站](http://lesscss.org/#using-less)。

## 将您的代码编译为 CSS

要自动编译您的代码，您需要安装编译器并配置一个 [Sass、Less 或 SCSS 文件监视器](#create_file_watcher)，该监视器将跟踪文件的更改并运行编译器。

打开文件时，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 、  Less  或  SCSS  文件名称相同，并且扩展名是  `.css` 。 生成文件的位置是在   要刷新的输出路径  字段中的 [New Watcher 对话框](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))。 根据您将要使用的工具，从列表中选择   Less  、   Sass   或   SCSS   预定义模板。

3. 在   程序  字段中，根据所选择的预定义模板指定编译器归档的路径。

* `lessc` 用于 Less。

* `sass` 适用于 Sass/SCSS。

如果您按照标准的 npm 安装程序进行操作，IntelliJ IDEA 会自动定位所需文件并自动填写字段。 否则，请手动输入路径或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 在打开的对话框中选择文件位置。

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

## 示例：将 SCSS 编译为 CSS

假设您的项目结构如下：

![将 SCSS 编译成 CSS：项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_project_structure.png)

如您所见，  `_grid.scss`  被导入到  `Page.scss`  中。 下面的示例展示了在手动或自动保存项目时，  `Page.scss`  如何编译为 CSS，以及对  `_grid.scss`  的更改如何反映到生成的 CSS 文件中。

Procedure:

1. 创建一种类型为   SCSS   的 File Watcher：打开   设置   对话框（ `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` ，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，并从列表中选择   SCSS  。

![将 SCSS 编译为 CSS：创建文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_create_file_watcher.png)

2. 在打开的   新建文件关注者   对话框中，所有必填字段都已填写。

![SCSS 文件监视器：设置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_settings.png)

实际上，这些设置足以成功运行编译器。

3. 让我们更改  `grid.scss` ，例如，将第 31 行的  `margin-left: 0;` 替换为  `margin-left: 12px;` 。 这会触发我们的文件关注者，编译器会处理  `Page.scss` 。 结果，将生成两个文件，并以嵌套形式显示在  `Page.scss`  下：

* 包含已编译 CSS 代码的 `Page.css`

* 包含源代码映射的 `Page.css.map` ，可在调试会话期间逐步执行应用。

![SCSS 文件关注者：已生成 CSS 文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_css_filed_generated.png)

虽然默认设置足以成功运行编译器，但仍可仔细查看这些设置，了解如何自定义文件关注者的行为。

### 更改触发文件监视器的操作

项目手动（  `文件 | 全部保存`  或 `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 时，编辑属于文件关注者作用域的文件时也会执行自动保存。 因此，在输入时，转译器可能会一直运行，这可能导致性能问题。 为解决该问题，请抑制自动保存已编辑的文件。

按 `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` 。 选择所需的文件关注者（本示例中为   SCSS  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，展开   高级选项   区域并清除   自动保存已编辑的文件以触发监视器   复选框。

![已关闭自动保存已编辑的文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_autosave_on_edit_off.png)

默认情况下，即使从 IntelliJ IDEA 外部编辑其作用域内的文件，文件关注者也会唤醒。 要重写此行为并仅在内部编辑时转译文件，请清除   在外部更改时触发监视器   复选框。

![“外部更改时触发文件关注者”已关闭](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_on_external_changes_off.png)

### 更改范围

默认情况下，IntelliJ IDEA 会监视整个项目中所有具有  `.scss`  扩展程序的文件的更改。 这适用于我们的示例。 不过，可以更改要处理的作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。

按 `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` 。 选择所需的文件关注者（本示例中为   SCSS  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，从列表中选择适用的作用域。 了解详情，请参阅 [文件范围与文件颜色](configuring-scopes-and-file-colors.html)。

![SCSS 文件关注者：更改默认作用域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_settings_change_scope.png)

### 自定义输出位置

默认情况下，生成的  `.css`  和  `.css.map`  文件存储在原始文件所在的文件夹中，并作为其子项显示在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中。 您可以更改此默认行为，将所有生成的  `.css` 和  `.css.map` 文件存储在单独的文件夹中。

先从一个简单的情况开始。 假设项目根目录中有一个  `custom_output.scss`  文件。

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_project_structure_plain.png)

我们来编辑  `custom_output.scss` ，例如，将第 6 行的  `fill-opacity: abs(50);`  替换为  `fill-opacity: abs(60);` 。 使用默认文件关注者配置时，生成的文件  `custom_output.css`  和  `custom_output.css.map`  将存储在项目根目录中，并显示为  `custom_output.scss`  的子项。

![默认设置：输出存储在项目根目录](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_default_settings.png)

将所有输出存储在单独的文件夹中会更方便，例如  `css` 。 创建一个自定义   SCSS_custom_output   文件关注者，并将  `css`  文件夹作为输出位置。

按 `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` 。 然后创建一个 SCSS File Watcher [如上所述](#ws_scss_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![带自定义输出路径的新文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_default_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带自定义输出路径的新文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_fw_saved.png)

现在，如果编辑  `custom_output.scss` ，例如，将第 6 行的  `fill-opacity: abs(50);`  替换为  `fill-opacity: abs(60);` ，IntelliJ IDEA 会创建一个  `css`  文件夹，并将生成的  `custom_output.css`  和  `custom_output.css.map`  文件存储在其中。

![自定义设置：输出存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_custom_settings.png)

### 自定义输出位置：保留原始文件夹结构

现在来看一个示例，其中  `.scss`  文件存储在文件夹结构中，例如：

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_project_structure_tree.png)

默认的 File Watcher 会将生成的文件存储在原始  `.scss` 文件旁边。

![自定义输出：生成的文件存储在源文件下](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_default_fw.png)

如果我们使用自定义 File Watcher [如上所述](#ws_sass_less_scss_example_scss_custom_output_location)，所有生成的文件将存储在同一个  `css`  文件夹中：

![自定义输出：生成的文件以扁平结构存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_custom_fw_plain.png)

要让 IntelliJ IDEA 保留文件夹结构，请创建另一个自定义文件关注者。

按 `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` 。 然后创建一个 SCSS File Watcher [如上所述](#ws_scss_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![带文件夹结构的自定义输出：文件关注者已更新](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_structured_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带文件夹结构的自定义输出：文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_structured_fw_saved.png)

现在，如果编辑  `custom_output_body.scss` 、  `custom_output_header.scss`  或  `custom_output_footer.scss` ，IntelliJ IDEA 会创建一个  `css`  文件夹，其子文件夹结构会保留  `styles_structured`  的结构。

![自定义设置：输出存储在单独的文件夹中，结构保留](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_structured.png)

## 示例：将 Less 编译成 CSS

假设，您的项目结构如下：

![将 Less 编译成 CSS：项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_project_structure.png)

下面的示例展示了当您手动或自动保存项目时，  `my-styles.less`  如何编译为 CSS，以及对  `my-styles.less`  的更改如何反映在生成的 CSS 文件中。

Procedure:

1. 创建一种类型为   Less   的 File Watcher：打开   设置   对话框（ `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` ，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，并从列表中选择   Less  。

![将 Less 编译为 CSS：创建一个文件监听器](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_create_file_watcher.png)

或者，点击   是   在编辑器选项卡顶部的   启用 File Watcher 将 LESS 编译为 CSS？   面板中用  `.less`  文件。

![将 Less 编译为 CSS：从编辑器窗格中创建一个 File Watcher](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_create_file_watcher_from_pane.png)

2. 在打开的   新建文件关注者   对话框中，所有必填字段都已填写。

![Less 文件监视器：设置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_file_watcher_settings.png)

实际上，这些设置足以成功运行编译器。

3. 让我们更改  `my-styles.less` ，例如，更改第 1 行的  `@color` 的值。 这会触发我们的 File Watcher。 因此，生成了两个文件并显示在  `my-styles.less` 下：

* 包含已编译 CSS 代码的 `my-styles.css`

* 包含源代码映射的 `my-styles.css.map` ，可在调试会话期间逐步执行应用。

![Less File Watcher：生成了一个 CSS 文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_file_watcher_css_filed_generated.png)

虽然默认设置足以成功运行编译器，但仍可仔细查看这些设置，了解如何自定义文件关注者的行为。

### 更改触发文件监视器的操作

项目手动（  `文件 | 全部保存`  或 `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 时，编辑属于文件关注者作用域的文件时也会执行自动保存。 因此，在输入时，转译器可能会一直运行，这可能导致性能问题。 为解决该问题，请抑制自动保存已编辑的文件。

按 `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` 。 选择所需的文件关注者（本示例中为   Less  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，展开   高级选项   区域并清除   自动保存已编辑的文件以触发监视器   复选框。

![已关闭自动保存已编辑的文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_file_watcher_autosave_on_edit_off.png)

### 更改范围

默认情况下，IntelliJ IDEA 会监视整个项目中所有具有  `.scss`  扩展程序的文件的更改。 这适用于我们的示例。 不过，可以更改要处理的作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。

按 `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` 。 选择所需的文件关注者（本示例中为   Less  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，从列表中选择适用的作用域。 了解详情，请参阅 [文件范围与文件颜色](configuring-scopes-and-file-colors.html)。

![SCSS 文件关注者：更改默认作用域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_file_watcher_settings_change_scope.png)

### 自定义输出位置

默认情况下，生成的  `.css`  和  `.css.map`  文件存储在原始文件所在的文件夹中，并作为其子项显示在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中。 您可以更改此默认行为，将所有生成的  `.css` 和  `.css.map` 文件存储在单独的文件夹中。

先从一个简单的情况开始。 假设项目根目录中有一个  `custom_output.less`  文件。

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_project_structure_plain.png)

让我们编辑  `custom_output.less` ，例如，将第 1 行的  `@color`  的值更改。 默认的 File Watcher 配置生成的文件  `custom_output.css` 和  `custom_output.css.map` 将会存储在项目根目录并显示为  `custom_output.less` 的子文件。

![默认设置：输出存储在项目根目录](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_result_with_default_settings.png)

将所有输出存储在单独的文件夹中会更方便，例如  `css` 。 创建一个自定义   自定义输出较少   文件关注者，并将  `css`  文件夹作为输出位置。

按 `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` 。 然后创建一个 Less 文件关注者 [，如上所述](#ws_less_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![带自定义输出路径的新文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_default_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带自定义输出路径的新文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_fw_saved.png)

现在，如果您编辑  `custom_output.less` ，例如，更改第 1 行的  `@color`  的值，IntelliJ IDEA 会创建一个  `css`  文件夹，并将生成的  `custom_output.css`  和  `custom_output.css.map`  文件存储在其中。

![自定义设置：输出存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_result_with_custom_settings.png)

### 自定义输出位置：保留原始文件夹结构

现在来看一个示例，其中  `.less`  文件存储在文件夹结构中，例如：

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_project_structure_tree.png)

默认的 File Watcher 会将生成的文件存储在原始  `.less` 文件旁边。

![自定义输出：生成的文件存储在源文件下](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_result_with_default_fw.png)

如果我们使用自定义 File Watcher [如上所述](#ws_sass_less_scss_example_less_custom_output_location)，所有生成的文件将存储在同一个  `css`  文件夹中：

![自定义输出：生成的文件以扁平结构存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_result_with_custom_fw_plain.png)

要让 IntelliJ IDEA 保留文件夹结构，请创建另一个自定义文件关注者。

按 `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` 。 然后创建一个 Less 文件关注者 [，如上所述](#ws_less_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![带文件夹结构的自定义输出：文件关注者已更新](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_structured_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带文件夹结构的自定义输出：文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_structured_fw_saved.png)

现在，如果编辑  `custom_output_body.less` 、  `custom_output_header.less`  或  `custom_output_footer.less` ，IntelliJ IDEA 会创建一个  `css`  文件夹，其子文件夹结构会保留  `styles_structured`  的结构。

![自定义设置：输出存储在单独的文件夹中，结构保留](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_custom_output_result_structured.png)

## 配置语法高亮

可以根据偏好设置和习惯配置支持 Less/Sass/SCSS/PostCSS 的语法高亮显示。

Procedure:

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))），转到  `编辑器 | 配色方案 | Less/Sass/SCSS/PostCSS` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

## 完成 Sass 和 SCSS 选择器

IntelliJ IDEA 为 Sass 和 SCSS 选择器提供补全，包括 [嵌套选择器](https://sass-lang.com/documentation/style-rules#nesting) 和 [使用和号（&）创建的选择器](https://sass-lang.com/documentation/style-rules/parent-selector)。

![Sass 和 SCSS 选择器的补全](https://resources.jetbrains.com/help/img/idea/2026.3/style_sheets_completion_scss.png)

## 搜索与导航

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/style_sheets_go_to_definition.mp4)

Procedure:

* 若要查找样式表符号的用法，请将文本光标放在符号上并按 `Alt+F7` (Windows), `⌥ F7` (macOS), `⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ U` (macOS System Shortcuts), `Alt+F7` (XWin), `Alt+Shift+7` (GNOME), `Alt+Shift+7` (KDE), `Alt+F7` (Emacs), `Alt+F7` (Sublime Text), `⌥ F7` (Sublime Text (macOS)), `Shift+F12` (Visual Studio), `⇧ F12` (Visual Studio (macOS)), `Alt+F7` (NetBeans), `Ctrl+G` (Eclipse), `⌘ ⇧ G` (Eclipse (macOS))。 了解更多信息，请参阅 [在项目中搜索用法](find-highlight-usages.html#find-usages)。

* 要从 Style Sheet 符号的使用跳转到其定义，请按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。 导航到定义适用于类、ID、选择器 – 包括嵌套选择器和带有和号  `&`  的选择器 - 以及变量和 mixin。

了解更多信息，请点击 [Go to declaration](navigating-through-the-source-code.html#go_to_declaration)。

## 文档查找

对于属性和伪元素，IntelliJ IDEA 可以向您显示相应的 [MDN 文章](https://developer.mozilla.org/en-US/docs/Web/CSS) 摘要。 此摘要显示在   文档   弹出窗口中，该窗口会显示属性及其值的简要说明，以及其 [Web 平台基线状态](https://web.dev/baseline)。

广泛可用:

![样式表快速文档：Baseline，广泛可用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility.png)

新近可用:

![样式表快速文档：Baseline，新近可用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility_newly_available.png)

可用性有限:

![样式表快速文档：Baseline，可用性有限](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility_limited.png)

对于选择器，IntelliJ IDEA 还显示其 [特异性](https://www.w3.org/TR/selectors-3/#specificity)。

![文档查找：选择器的特异性](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_specificity.png)

Procedure: 查看属性文档

* 将文本光标定位在属性上，然后按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)) 或从主菜单中选择  `查看 | 快速文档查找` 。

* 当您悬停在某属性上时，IntelliJ IDEA 会立即在   文档  弹出窗口中显示其引用。

您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 [配置文档弹出窗口的行为](css.html#ws_documentation_lookup_configure_popup)。

Procedure: 配置文档弹出窗口的行为

* 要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的 ![显示选项菜单图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)，并禁用   在鼠标移动时显示   选项。

* 要调整   文档   弹出窗口的显示速度，请打开   设置   对话框（ `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))），转到  `编辑器 | 常规 | 代码补全 | 弹出窗口` ，然后选择   显示文档弹窗   复选框，并指定延迟时间。

Procedure: 在浏览器中打开 MDN 文档

* 在   文档  弹出窗口 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))中，点击底部的链接。

* 按 `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F1` (NetBeans), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) 或从主菜单中选择  `视图 | 外部文档` 。

## 格式设置

使用 IntelliJ IDEA 内置格式化程序，可以重新格式化样式表代码片段以及整个文件和文件夹，以满足特定语言的代码样式要求。 格式化程序在您生成或重构代码时也会自动唤醒。

Procedure:

* 要配置样式表语言的格式设置，请打开   设置   对话框（ `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))），转到  `编辑器 | 代码样式 | 样式表 | <您的样式表语言>` ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。

当您更改设置时，   预览   区域会显示这些更改如何影响格式化。

* 在 CSS、SCSS 和 Less 上下文中，IntelliJ IDEA 默认对  `import`  语句和 URL 中生成的字符串文字使用双引号。 要使用单引号，请打开   其他  标签，并从   单引号  选项中选择   引号标记  列表。

要在重新格式化后将所选样式应用于整个文件，请选择列表下方的   在格式化时强制执行   复选框。

> **Note:**
> 目前，更改引号配置不会影响注入的样式表和  `<style>`  选项卡内的 CSS 代码。

* 若要重新格式化代码片段，请在编辑器中选择它并按 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS))。

* 要重新格式化文件或文件夹，请在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择它，然后按 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS))。 有关详细信息，请参阅 [重新格式化并重排代码](reformat-and-rearrange-code.html)。

* 或者，您可以使用 [Prettier](prettier.html)（ `Ctrl+Alt+Shift+P` (Windows), `⌘ ⌥ ⇧ P` (macOS), `⌘ ⌥ ⇧ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ P` (macOS System Shortcuts), `Ctrl+Alt+Shift+P` (XWin), `Ctrl+Alt+Shift+P` (GNOME), `Ctrl+Alt+Shift+P` (KDE), `Ctrl+Alt+Shift+P` (Emacs), `Ctrl+Alt+Shift+P` (Sublime Text), `⌘ ⌥ ⇧ P` (Sublime Text (macOS)), `Ctrl+Alt+Shift+P` (Visual Studio), `⌘ ⌥ ⇧ P` (Visual Studio (macOS)), `Ctrl+Alt+Shift+P` (NetBeans), `Ctrl+Alt+Shift+P` (Eclipse), `⌘ ⌥ ⇧ P` (Eclipse (macOS))）。

## 重构

借助 IntelliJ IDEA，您可以将样式表中的表达式转换为变量，并使用  `var(--var-name)`  语法在  `.css`  文件中引入这些变量，或使用  `$`  语法在  `.scss`  和  `.sass`  文件中引入。

![样式表：引入变量](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_extract_variable.animated.gif)

Procedure: 引入变量

1. 在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+V` (NetBeans), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) 或从上下文菜单或主菜单中选择  `重构 | 引入 | 引入变量` 。

2. 如果找到所选表达式的多个出现位置，请从   找到多个出现位置   列表中选择   仅替换此处   或   替换所有出现位置  。

3. 对于  `.scss`  和  `.sass` ，请为变量选择  全局  或  局部  作用域。

4. 在红色边框的字段中，接受建议的变量名或指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

使用 IntelliJ IDEA，您可以从 CSS、SCSS、Sass 或 Less 文件中的现有声明创建新的规则集，甚至可以通过重构和意图操作在文件之间移动整个规则集。

Procedure: 引入规则集

1. 请选择要引入的声明。 如果您只需要一个声明，只需将文本光标放在其中。

2. 按 `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))并从列表中选择   引入规则集  。

IntelliJ IDEA 创建一个具有相同选择器的新规则集，并将选定声明移到其中。 如果选中内容包含注释、嵌套选择器等，它们也会移到新的规则集中。

Procedure: 将规则集移到其他文件

1. 请将文本光标放在规则集中任意位置并按 `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Ctrl+M` (NetBeans), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS))。

2. 在打开的对话框中，指定要移动规则集的文件。 如果指定的文件不存在，IntelliJ IDEA将建议创建它。

3. 默认情况下，IntelliJ IDEA 会自动打开规则集所在的文件。 要更改此行为，请清除   在编辑器中打开   复选框。

常见的重构操作，如  Copy 、  Move 或  Rename ，也可用。

![重命名重构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_sass_rename.animated.gif)

## 检查与浏览器的兼容性

除了 [在文档弹出窗口中查找](css.html#ws_css_documentation_lookup)外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data)，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。

![样式表兼容性检查弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_documentation_lookup_check_compatibility_inspection_warning_popup.png)

Procedure: 打开兼容性检查

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))），转到  `编辑器 | 检查` 。

2. 展开   CSS   节点并选择   属性与选定浏览器不兼容  。 在   选项  区域，选择您要针对的浏览器及其最低版本。

3. 在   选项   区域中，选择用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。

![CSS 兼容性检查设置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_documentation_lookup_check_compatibility_inspection_settings.png)

## 管理颜色

IntelliJ IDEA 支持 [CSS 颜色](https://www.w3.org/TR/css-color-5/)管理，包括 [代码补全](auto-completing-code.html)、 [快速文档查询](null)和 [颜色预览](css.html#ws_css_change_color_values_use_preview)。 为绝对颜色、相对颜色和混合颜色提供编码辅助。

![颜色管理的编码辅助](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_intro.png)

Procedure: 指定颜色

* 将文本光标放在  `color`  属性处，按 `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS))，然后选择所需的颜色值，或选择   选择颜色...   来选取自定义颜色。

![选择颜色](https://resources.jetbrains.com/help/img/idea/2026.3/ws_chooseColor.png)

* 要使用代码而不是可读的颜色名称，请按 `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)) 并从列表中选择   将颜色转换为 <颜色代码系统>  ，其中 <颜色代码系统> 为 [HEX](https://www.w3schools.com/colors/colors_hexadecimal.asp)、 [HSL](https://www.w3schools.com/colors/colors_hsl.asp)、 [HWB](https://www.w3schools.com/colors/colors_hwb.asp)、 [RGB](https://www.w3schools.com/colors/colors_rgb.asp)、 [lch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lch)、 [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) 或 [oklab](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab)。

![使用代码而不是颜色名称](https://resources.jetbrains.com/help/img/idea/2026.3/chooseColor.png)

Procedure: 更改颜色

* 点击装订区域中的颜色图标，然后在弹出窗口中选取所需颜色。

![选取颜色](https://resources.jetbrains.com/help/img/idea/2026.3/ws_colorPicker.png)

* 或者，将文本光标置于颜色属性处，按 `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))，在列表中选择   更改颜色  ，然后在弹出窗口中选择所需颜色。

![更改颜色 - 上下文菜单](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_change_color_context_action.png)

Procedure: 切换颜色预览

IntelliJ IDEA 会显示绝对颜色、相对颜色和混合颜色的预览。

![颜色预览简介](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_use_preview.png)

* 默认情况下，IntelliJ IDEA 会在装订区域中将颜色预览显示为图标。 要在背景中显示颜色预览，请打开   设置   对话框（ `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))），转到  `编辑器 | 外观`  并选中   将 CSS 颜色预览显示为背景   复选框。

![在背景中显示颜色预览](https://resources.jetbrains.com/help/img/idea/2026.3/colorPreview_background.png)

* 要恢复装订区域中的颜色预览图标，请打开   设置   对话框（ `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))），转到  `编辑器 | 常规 | 装订线图标` ，并在   常规   区域中选中   颜色预览   复选框。

![在装订区域启用颜色预览](https://resources.jetbrains.com/help/img/idea/2026.3/colorPreview.png)

## 查看应用于标签的样式

在 HTML、XHTML、JSP 和 JSPX 文件中，IntelliJ IDEA 可以向您显示应用于任意标签的所有样式。

![查看应用到 <body> 标签的样式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_show_styles.png)

Procedure:

* 从标签的上下文菜单中选择  `显示标签的应用样式` 。

IntelliJ IDEA 打开   CSS 样式  工具窗口，工具窗口有两个窗格，左侧窗格显示标签的样式，右侧窗格显示它们的定义。 对于每个标签，IntelliJ IDEA 会打开一个单独的选项卡。

从工具窗口，您可以导航到源代码中的标签和属性定义。

* 跳转到标签，请点击左侧窗格工具栏上的 ![“导航到标记”工具栏按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.preview.svg) 。

* 要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的 ![“导航到样式源”按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.preview.svg)。

## See also

### 过程

[File Watchers](using-file-watchers.html) [压缩 CSS](compressing-css.html)

### 参考

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

### 外部链接

[http://sass-lang.com/](http://sass-lang.com/) [http://lesscss.org/](http://lesscss.org/) [http://www.nongnu.org/scss/](http://www.nongnu.org/scss/)