Sass、SCSS 和 Less
IntelliJ IDEA 集成了将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器。 要在 IntelliJ IDEA 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher。
开始之前
请确保您的计算机上安装了 Node.js。
安装并启用 File Watchers插件，在 设置 | 插件 页面， Marketplace 选项卡中，如 从 JetBrains Marketplace 安装插件中所述。
确保 File Watchers 和 Less 或 Sass 所需插件已在 设置 | 插件 页面、选项卡 已安装 上启用。 如需更多信息，请参阅 插件管理。
安装 Sass/SCSS
在嵌入的 终端 （Alt+F12 ）中输入：
npm install -g sass了解更多信息，请访问 Sass 官方网站。
安装 Less
在嵌入的 终端 （Alt+F12 ）中输入：
npm install --global less详细了解请访问 Less 官方网站。
将您的代码编译为 CSS
要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器 ，该监视器将跟踪文件的更改并运行编译器。
当您打开一个文件时，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、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。 生成文件的位置是在 要刷新的输出路径 字段中的 New Watcher 对话框中定义的。 然而，在 项目树 ，它们显示在源文件下，现在显示为一个节点。
创建一个 File Watcher
在 设置 对话框（Ctrl+Alt+S ）中，点击 File Watchers 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert。 根据您将要使用的工具，从列表中选择 更少、 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;。 这将触发我们的 File Watcher，编译器将处理 Page.scss 。 因此，将生成两个文件并在 Page.scss 下嵌套显示：Page.css 与已编译的 CSS 代码
Page.css.map 以及源映射，允许您在调试会话期间逐步调试应用程序。
虽然默认设置足以成功运行编译器，但我们仍然仔细看看它们，了解如何自定义 File Watcher 的行为。
更改触发文件监视器的操作
文件监视器在您的项目被手动（ 或 Ctrl+S ）或自动保存后立即唤醒并启动转译器。
一般来说，当您将焦点从 IntelliJ IDEA 移开（窗口失活）时，您的代码会自动保存。 使用 File Watchers 时，当您从 File Watcher's 范围内编辑文件时，也会执行自动保存。 因此，转译器可能在您键入时一直运行，这可能会导致性能问题。 要解决此问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 
。 在 编辑文件监视器 对话框中，展开 高级选项 区域，清除 自动保存编辑的文件以触发观察程序 复选框。
默认情况下，即使在 IntelliJ IDEA 之外编辑其范围内的文件，文件监视器也会被唤醒。 要覆盖此行为并仅在内部编辑时编译文件，请清除 外部更改触发观察程序 复选框。
更改范围
默认情况下，IntelliJ IDEA 监控整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 然而，您可以更改范围以处理例如仅未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的范围。 请从 文件范围与文件颜色 了解更多。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件存储在原始文件所在的文件夹中，并作为其子项显示在 项目 工具窗口 Alt+1 中。 您可以更改此默认行为，将所有生成的 .css 和 .css.map 文件存储在单独的文件夹中。
让我们从一个简单的案例开始。 假设您在项目根目录有一个 custom_output.scss 文件。
我们来编辑 custom_output.scss ，例如，将第6行的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60);。 默认的 File Watcher 配置中，生成的文件 custom_output.css 和 custom_output.css.map 将存储在项目根目录，并显示为 custom_output.scss 的子项。
将所有输出存储在一个单独的文件夹中会很方便，例如， css 。 让我们使用 css 文件夹作为输出位置创建一个自定义 SCSS_custom_output File Watcher。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS File Watcher 如上所述。
将默认设置更新如下：
在 实参 字段中，输入：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中，输入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新建的文件监视器，并确保其已启用。
现在，如果您编辑 custom_output.scss ，例如，将第六行的 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 保留文件夹结构，让我们创建另一个自定义 File Watcher。
按 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 文件中。
创建一种类型为 更少 的 File Watcher：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择 更少。
或者，点击 是 在编辑器选项卡顶部的 启用 File Watcher 将 LESS 编译为 CSS？ 面板中用 .更少 文件。
在打开的 新文件监视器 对话框中，所有必填字段都已填写。
实际上，这些设置足以成功运行编译器。
让我们更改 my-styles.less ，例如，更改第 1 行的
@color的值。 这会触发我们的 File Watcher。 因此，生成了两个文件并显示在 my-styles.less 下：my-styles.css 与已编译的 CSS 代码
my-styles.css.map 以及源映射，允许您在调试会话期间逐步调试应用程序。
虽然默认设置足以成功运行编译器，但我们仍然仔细看看它们，了解如何自定义 File Watcher 的行为。
更改触发文件监视器的操作
文件监视器在您的项目被手动（ 或 Ctrl+S ）或自动保存后立即唤醒并启动转译器。
一般来说，当您将焦点从 IntelliJ IDEA 移开（窗口失活）时，您的代码会自动保存。 使用 File Watchers 时，当您从 File Watcher's 范围内编辑文件时，也会执行自动保存。 因此，转译器可能在您键入时一直运行，这可能会导致性能问题。 要解决此问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（更少 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域，清除 自动保存编辑的文件以触发观察程序 复选框。
更改范围
默认情况下，IntelliJ IDEA 监控整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 然而，您可以更改范围以处理例如仅未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（更少 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的范围。 请从 文件范围与文件颜色 了解更多。
自定义输出位置
默认情况下，生成的 .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 文件夹作为输出位置创建一个自定义 自定义输出较少 File Watcher。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 Less File Watcher 如上所述。
将默认设置更新如下：
在 实参 字段中，输入：
$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 文件存储在其中。
自定义输出位置：保持原有的文件夹结构
现在让我们考虑一个示例，其中 .更少 文件存储在一个文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .更少 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
为了让 IntelliJ IDEA 保留文件夹结构，让我们创建另一个自定义 File Watcher。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 Less File Watcher 如上所述。
将默认设置更新如下：
在 实参 字段中，输入：
$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 语法高亮显示。
在 设置 对话框（Ctrl+Alt+S ）中，前往 。
选择配色方案，接受从默认值继承的高亮设置，或按照 颜色和字体 中所述自定义它们。
云补全和整行补全
IntelliJ IDEA 在 Sass/SCSS 和 Less 代码中提供 Cloud Completion 和 Full Line completion。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。
启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框，并确保选中 类 CSS 复选框。
由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 文件 复选框。
