Sass、SCSS、Less 和 PostCSS
IntelliJ IDEA 集成了将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器。 要在 IntelliJ IDEA 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher。
开始之前
请确保您的计算机上安装了 Node.js。
安装并启用 File Watchers 插件，在 设置 | 插件 页面上操作，如 从 JetBrains Marketplace 安装插件中所述。
确保 File Watchers 以及 Less 或 Sass 所需插件已在 设置 | 插件 页面上启用。 如需更多信息，请参阅 管理插件。
安装 Sass/SCSS
在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：
npm install -g sass了解更多信息，请访问 Sass 官方网站。
安装 Less
在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：
npm install --global less详细了解请访问 Less 官方网站。
将您的代码编译为 CSS
要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器 ，该监视器将跟踪文件的更改并运行编译器。
打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件关注者。 如果已配置此类文件关注者但其已禁用，IntelliJ IDEA 会显示一个弹出窗口，告知已配置的文件关注者并建议启用它。
如果当前项目中已配置并启用了适用的文件关注者，IntelliJ IDEA 会在 新建关注者对话框 中指定的事件发生时自动启动编译器。
如果选中 自动保存已编辑的文件以触发监视器 复选框，只要源代码发生任何更改，就会调用文件关注者。
如果清除 自动保存已编辑的文件以触发监视器 复选框，文件关注者会在保存时（、 Ctrl+S ）或将焦点从 IntelliJ IDEA 移开时（帧停用时）启动。
有关更多信息，请参阅 File Watchers。
IntelliJ IDEA 会创建一个包含生成输出的单独文件。 该文件的名称与源 Sass、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。 生成文件的位置是在 要刷新的输出路径 字段中的 New Watcher 对话框中定义的。 然而，在 项目树 ，它们显示在源文件下，现在显示为一个节点。
创建一个 File Watcher
在 设置 对话框（Ctrl+Alt+S ）中，点击 File Watchers 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert。 根据您将要使用的工具，从列表中选择 Less、 Sass 或 SCSS 预定义模板。在 程序 字段中，根据所选择的预定义模板指定编译器归档的路径。
lessc 用于 Less。
sass 适用于 Sass/SCSS。
如果您按照标准的 npm 安装程序进行操作，IntelliJ IDEA 会自动定位所需文件并自动填写字段。 否则，请手动输入路径或点击
在打开的对话框中选择文件位置。按照 File Watchers 中的说明进行操作。
示例：将 SCSS 编译为 CSS
假设您的项目结构如下：
如您所见， _grid.scss 被导入到 Page.scss 中。 下面的示例展示了在手动或自动保存项目时， Page.scss 如何编译为 CSS，以及对 _grid.scss 的更改如何反映到生成的 CSS 文件中。
创建一种类型为 SCSS 的 File Watcher：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择 SCSS。
在打开的 新建文件关注者 对话框中，所有必填字段都已填写。
实际上，这些设置足以成功运行编译器。
让我们更改 grid.scss ，例如，将第 31 行的
margin-left: 0;替换为margin-left: 12px;。 这会触发我们的文件关注者，编译器会处理 Page.scss 。 结果，将生成两个文件，并以嵌套形式显示在 Page.scss 下：包含已编译 CSS 代码的 Page.css
包含源代码映射的 Page.css.map ，可在调试会话期间逐步执行应用。
虽然默认设置足以成功运行编译器，但仍可仔细查看这些设置，了解如何自定义文件关注者的行为。
更改触发文件监视器的操作
项目手动（ 或 Ctrl+S ）或自动保存后，文件关注者会立即唤醒并启动转译器。
一般来说，当焦点从 IntelliJ IDEA 移开时（帧停用时），代码会自动保存。 使用 File Watchers 时，编辑属于文件关注者作用域的文件时也会执行自动保存。 因此，在输入时，转译器可能会一直运行，这可能导致性能问题。 为解决该问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件关注者（本示例中为 SCSS ），然后点击工具栏上的 
。 在 编辑文件关注者 对话框中，展开 高级选项 区域并清除 自动保存已编辑的文件以触发监视器 复选框。
默认情况下，即使从 IntelliJ IDEA 外部编辑其作用域内的文件，文件关注者也会唤醒。 要重写此行为并仅在内部编辑时转译文件，请清除 在外部更改时触发监视器 复选框。
更改范围
默认情况下，IntelliJ IDEA 会监视整个项目中所有具有 .scss 扩展程序的文件的更改。 这适用于我们的示例。 不过，可以更改要处理的作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件关注者（本示例中为 SCSS ），然后点击工具栏上的 。 在 编辑文件关注者 对话框中，从列表中选择适用的作用域。 了解详情，请参阅 文件范围与文件颜色。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件存储在原始文件所在的文件夹中，并作为其子项显示在 项目 工具窗口（Alt+1 ）中。 您可以更改此默认行为，将所有生成的 .css 和 .css.map 文件存储在单独的文件夹中。
先从一个简单的情况开始。 假设项目根目录中有一个 custom_output.scss 文件。
我们来编辑 custom_output.scss ，例如，将第 6 行的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60);。 使用默认文件关注者配置时，生成的文件 custom_output.css 和 custom_output.css.map 将存储在项目根目录中，并显示为 custom_output.scss 的子项。
将所有输出存储在单独的文件夹中会更方便，例如 css 。 创建一个自定义 SCSS_custom_output 文件关注者，并将 css 文件夹作为输出位置。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS File Watcher 如上所述。
按如下方式更新默认设置：
在 参数 字段中，键入：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新的文件关注者，并确保已启用。
现在，如果编辑 custom_output.scss ，例如，将第 6 行的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60); ，IntelliJ IDEA 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在来看一个示例，其中 .scss 文件存储在文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .scss 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
要让 IntelliJ IDEA 保留文件夹结构，请创建另一个自定义文件关注者。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS File Watcher 如上所述。
按如下方式更新默认设置：
在 参数 字段中，键入：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
保存新的文件关注者，并确保已启用。
现在，如果编辑 custom_output_body.scss 、 custom_output_header.scss 或 custom_output_footer.scss ，IntelliJ IDEA 会创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。
示例：将 Less 编译成 CSS
假设，您的项目结构如下：
下面的示例展示了当您手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何反映在生成的 CSS 文件中。
创建一种类型为 Less 的 File Watcher：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择 Less。
或者，点击 是 在编辑器选项卡顶部的 启用 File Watcher 将 LESS 编译为 CSS？ 面板中用 .less 文件。
在打开的 新建文件关注者 对话框中，所有必填字段都已填写。
实际上，这些设置足以成功运行编译器。
让我们更改 my-styles.less ，例如，更改第 1 行的
@color的值。 这会触发我们的 File Watcher。 因此，生成了两个文件并显示在 my-styles.less 下：包含已编译 CSS 代码的 my-styles.css
包含源代码映射的 my-styles.css.map ，可在调试会话期间逐步执行应用。
虽然默认设置足以成功运行编译器，但仍可仔细查看这些设置，了解如何自定义文件关注者的行为。
更改触发文件监视器的操作
项目手动（ 或 Ctrl+S ）或自动保存后，文件关注者会立即唤醒并启动转译器。
一般来说，当焦点从 IntelliJ IDEA 移开时（帧停用时），代码会自动保存。 使用 File Watchers 时，编辑属于文件关注者作用域的文件时也会执行自动保存。 因此，在输入时，转译器可能会一直运行，这可能导致性能问题。 为解决该问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件关注者（本示例中为 Less ），然后点击工具栏上的 。 在 编辑文件关注者 对话框中，展开 高级选项 区域并清除 自动保存已编辑的文件以触发监视器 复选框。
更改范围
默认情况下，IntelliJ IDEA 会监视整个项目中所有具有 .scss 扩展程序的文件的更改。 这适用于我们的示例。 不过，可以更改要处理的作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件关注者（本示例中为 Less ），然后点击工具栏上的 。 在 编辑文件关注者 对话框中，从列表中选择适用的作用域。 了解详情，请参阅 文件范围与文件颜色。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件存储在原始文件所在的文件夹中，并作为其子项显示在 项目 工具窗口（Alt+1 ）中。 您可以更改此默认行为，将所有生成的 .css 和 .css.map 文件存储在单独的文件夹中。
先从一个简单的情况开始。 假设项目根目录中有一个 custom_output.less 文件。
让我们编辑 custom_output.less ，例如，将第 1 行的 @color 的值更改。 默认的 File Watcher 配置生成的文件 custom_output.css 和 custom_output.css.map 将会存储在项目根目录并显示为 custom_output.less 的子文件。
将所有输出存储在单独的文件夹中会更方便，例如 css 。 创建一个自定义 自定义输出较少 文件关注者，并将 css 文件夹作为输出位置。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 Less 文件关注者 ，如上所述。
按如下方式更新默认设置：
在 参数 字段中，键入：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新的文件关注者，并确保已启用。
现在，如果您编辑 custom_output.less ，例如，更改第 1 行的 @color 的值，IntelliJ IDEA 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在来看一个示例，其中 .less 文件存储在文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .less 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
要让 IntelliJ IDEA 保留文件夹结构，请创建另一个自定义文件关注者。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 Less 文件关注者 ，如上所述。
按如下方式更新默认设置：
在 参数 字段中，键入：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
保存新的文件关注者，并确保已启用。
现在，如果编辑 custom_output_body.less 、 custom_output_header.less 或 custom_output_footer.less ，IntelliJ IDEA 会创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。
配置语法高亮
可以根据偏好设置和习惯配置支持 Less/Sass/SCSS/PostCSS 的语法高亮显示。
在 设置 对话框（Ctrl+Alt+S ），转到 。
选择配色方案，接受从默认设置继承的高亮设置，或按照 颜色与字体 中的说明进行自定义。
完成 Sass 和 SCSS 选择器
IntelliJ IDEA 为 Sass 和 SCSS 选择器提供补全，包括 嵌套选择器 和 使用和号（&）创建的选择器。
搜索与导航
文档查找
对于属性和伪元素，IntelliJ IDEA 可以向您显示相应的 MDN 文章 摘要。 此摘要显示在 文档 弹出窗口中，该窗口会显示属性及其值的简要说明，以及其 Web 平台基线状态。
对于选择器，IntelliJ IDEA 还显示其 特异性。
查看属性文档
将文本光标定位在属性上，然后按 Ctrl+Q 或从主菜单中选择 。
当您悬停在某属性上时，IntelliJ IDEA 会立即在 文档 弹出窗口中显示其引用。
您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 配置文档弹出窗口的行为。
配置文档弹出窗口的行为
要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的
，并禁用 在鼠标移动时显示 选项。要调整 文档 弹出窗口的显示速度，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选择 显示文档弹窗 复选框，并指定延迟时间。
在浏览器中打开 MDN 文档
在 文档 弹出窗口 Ctrl+Q 中，点击底部的链接。
按 Shift+F1 或从主菜单中选择 。
格式设置
使用 IntelliJ IDEA 内置格式化程序，可以重新格式化样式表代码片段以及整个文件和文件夹，以满足特定语言的代码样式要求。 格式化程序在您生成或重构代码时也会自动唤醒。
要配置样式表语言的格式设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。
当您更改设置时， 预览 区域会显示这些更改如何影响格式化。
在 CSS、SCSS 和 Less 上下文中，IntelliJ IDEA 默认对
import语句和 URL 中生成的字符串文字使用双引号。 要使用单引号，请打开 其他 标签，并从 单引号 选项中选择 引号标记 列表。要在重新格式化后将所选样式应用于整个文件，请选择列表下方的 在格式化时强制执行 复选框。
若要重新格式化代码片段，请在编辑器中选择它并按 Ctrl+Alt+L。
要重新格式化文件或文件夹，请在 项目 工具窗口（Alt+1 ）中选择它，然后按 Ctrl+Alt+L。 有关详细信息，请参阅 重新格式化并重排代码。
或者，您可以使用 Prettier （Ctrl+Alt+Shift+P）。
重构
借助 IntelliJ IDEA，您可以将样式表中的表达式转换为变量，并使用 var(--var-name) 语法在 .css 文件中引入这些变量，或使用 $ 语法在 .scss 和 .sass 文件中引入。
引入变量
在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 Ctrl+Alt+V 或从上下文菜单或主菜单中选择 。
如果找到所选表达式的多个出现位置，请从 找到多个出现位置 列表中选择 仅替换此处 或 替换所有出现位置。
对于 .scss 和 .sass ，请为变量选择 全局 或 局部 作用域。
在红色边框的字段中，接受建议的变量名或指定自定义名称。 按 Enter 准备。
使用 IntelliJ IDEA，您可以从 CSS、SCSS、Sass 或 Less 文件中的现有声明创建新的规则集，甚至可以通过重构和意图操作在文件之间移动整个规则集。
引入规则集
请选择要引入的声明。 如果您只需要一个声明，只需将文本光标放在其中。
按 Alt+Enter 并从列表中选择 引入规则集。
IntelliJ IDEA 创建一个具有相同选择器的新规则集，并将选定声明移到其中。 如果选中内容包含注释、嵌套选择器等，它们也会移到新的规则集中。
将规则集移到其他文件
请将文本光标放在规则集中任意位置并按 F6。
在打开的对话框中，指定要移动规则集的文件。 如果指定的文件不存在，IntelliJ IDEA将建议创建它。
默认情况下，IntelliJ IDEA 会自动打开规则集所在的文件。 要更改此行为，请清除 在编辑器中打开 复选框。
常见的重构操作，如 Copy、 Move或 Rename ，也可用。
检查与浏览器的兼容性
除了 在文档弹出窗口中查找外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 MDN Browser Compatibility Data ，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。
打开兼容性检查
在 设置 对话框（Ctrl+Alt+S ），转到 。
展开 CSS 节点并选择 属性与选定浏览器不兼容。 在 选项 区域，选择您要针对的浏览器及其最低版本。
在 选项 区域中，选择用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。
管理颜色
IntelliJ IDEA 支持 CSS 颜色管理，包括 代码补全、 快速文档查询和 颜色预览。 为绝对颜色、相对颜色和混合颜色提供编码辅助。
指定颜色
更改颜色
点击装订区域中的颜色图标，然后在弹出窗口中选取所需颜色。
或者，将文本光标置于颜色属性处，按 Alt+Enter ，在列表中选择 更改颜色 ，然后在弹出窗口中选择所需颜色。
切换颜色预览
IntelliJ IDEA 会显示绝对颜色、相对颜色和混合颜色的预览。
默认情况下，IntelliJ IDEA 会在装订区域中将颜色预览显示为图标。 要在背景中显示颜色预览，请打开 设置 对话框（Ctrl+Alt+S ），转到 并选中 将 CSS 颜色预览显示为背景 复选框。
要恢复装订区域中的颜色预览图标，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并在 常规 区域中选中 颜色预览 复选框。
查看应用于标签的样式
在 HTML、XHTML、JSP 和 JSPX 文件中，IntelliJ IDEA 可以向您显示应用于任意标签的所有样式。
从标签的上下文菜单中选择 。
IntelliJ IDEA 打开 CSS 样式 工具窗口，工具窗口有两个窗格，左侧窗格显示标签的样式，右侧窗格显示它们的定义。 对于每个标签，IntelliJ IDEA 会打开一个单独的选项卡。
从工具窗口，您可以导航到源代码中的标签和属性定义。
跳转到标签，请点击左侧窗格工具栏上的
。要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的
。