Sass、SCSS 和 Less
PhpStorm 集成了将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器。 要在 PhpStorm 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher。
开始之前
安装 Sass/SCSS
在嵌入的 终端 (Alt+F12 )中，输入：
npm install -g sass了解更多信息，请访问 Sass 官方网站。
安装 Less
在嵌入的 终端 (Alt+F12 )中，输入：
npm install --global less详细了解请访问 Less 官方网站。
将您的代码编译为 CSS
要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器 ，该监视器将跟踪文件的更改并运行编译器。
当您打开一个文件时，PhpStorm会检查当前项目中是否有适用的 File Watcher。 如果此类 File Watcher 已配置但已禁用，PhpStorm 会显示一个弹出窗口，通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher，则 PhpStorm 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中了 自动保存已编辑的文件以触发监视器 复选框，一旦对源代码进行了任何更改，就会调用 File Watcher。
如果 自动保存已编辑的文件以触发监视器 复选框被清除，File Watcher 会在保存时（， Ctrl+S ）或当您将焦点从 PhpStorm 移开时（当框架失去焦点时）启动。
请从 文件监视器 中了解更多。
PhpStorm 会创建一个包含生成输出的单独文件。 该文件的名称与源 Sass、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。 生成文件的位置是在 要刷新的输出路径 字段中的 New Watcher 对话框中定义的。 然而，在 项目树 ，它们显示在源文件下，现在显示为一个节点。
创建文件监视器
在 设置 对话框（Ctrl+Alt+S ）中，点击 文件监视器 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert。 根据您将要使用的工具，从列表中选择 Less、 Sass 或 SCSS 预定义模板。在 程序 字段中，根据所选择的预定义模板指定编译器归档的路径。
lessc 用于 Less。
sass 适用于 Sass/SCSS。
如果您按照标准的 npm 安装程序进行操作，PhpStorm 会自动定位所需文件并自动填写字段。 否则，请手动输入路径或点击
在打开的对话框中选择文件位置。请按照 文件监视器 中的描述进行操作。
示例：将 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 ）或自动保存后立即启动编译器。
通常，当您从 PhpStorm 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 File Watcher 范围内的文件时，也会自动保存。 因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。 要解决这个问题，请禁止自动保存编辑过的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 请选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 
。 在 编辑文件监视器 对话框中，展开 高级选项 区域，并清除 自动保存已编辑的文件以触发监视器 复选框。
默认情况下，即使从 PhpStorm 外部编辑其范围内的文件，File Watcher 仍会启动。 要覆盖此行为，并仅在内部编辑时转换文件，请清除 在外部更改时触发监视器 复选框。
更改范围
默认情况下，PhpStorm 会监视整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 不过，您可以更改范围，例如，仅处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 请选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的范围。 从 文件范围与文件颜色 了解更多。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件存储在原始文件所在的文件夹中，并作为其子项显示在 Project 工具窗口 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 。 让我们创建一个自定义 SCSS_custom_output 文件监视器，并将 css 文件夹作为输出位置。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS 文件监视器 如上所述。
请按以下步骤更新默认设置：
在 参数 字段中，键入：
$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); ，PhpStorm会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在让我们考虑一个示例，其中 .scss 文件存储在文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .scss 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
为了让 PhpStorm 保留文件夹结构，我们再创建一个自定义的 File Watcher。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS 文件监视器 如上所述。
请按以下步骤更新默认设置：
在 参数 字段中，键入：
$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 ，PhpStorm 将创建一个 css 文件夹，子文件夹结构将保留 样式结构 的结构。
示例：将 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 下：my-styles.css 及编译后的 CSS 代码
my-styles.css.map 使用源映射，允许您在调试会话期间逐步执行应用程序。
尽管默认设置足以成功运行编译器，但我们仍然仔细看看它们，以了解如何自定义 File Watcher 的行为。
更改触发文件观察者的操作
文件监视器会在您的项目被手动（ 或 Ctrl+S ）或自动保存后立即启动编译器。
通常，当您从 PhpStorm 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 File Watcher 范围内的文件时，也会自动保存。 因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。 要解决这个问题，请禁止自动保存编辑过的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 请选择所需的 File Watcher（Less 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域，并清除 自动保存已编辑的文件以触发监视器 复选框。
更改范围
默认情况下，PhpStorm 会监视整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 不过，您可以更改范围，例如，仅处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 请选择所需的 File Watcher（Less 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的范围。 从 文件范围与文件颜色 了解更多。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件存储在原始文件所在的文件夹中，并作为其子项显示在 Project 工具窗口 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 File Watcher 如上所述。
请按以下步骤更新默认设置：
在 参数 字段中，键入：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新的文件监视器并确保其已启用。
现在，如果您编辑 custom_output.less ，例如，更改第 1 行的 @color 的值，PhpStorm 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在让我们考虑一个示例，其中 .less 文件存储在文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .less 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
为了让 PhpStorm 保留文件夹结构，我们再创建一个自定义的 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 ，PhpStorm 将创建一个 css 文件夹，子文件夹结构将保留 样式结构 的结构。
配置语法高亮
您可以根据您的偏好和习惯配置 Less/Sass/SCSS 语法高亮显示。
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。
云补全和整行补全
PhpStorm 在 Sass/SCSS 和 Less 代码中提供 Cloud Completion 和 Full Line completion。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 此功能在 PhpStorm 中开箱即用，无需额外许可。
启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 启用本地Full Line 补全建议 复选框，并确保选中 类 CSS 复选框。
由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全在考虑上下文的情况下建议语法上可接受的解决方案，并提前运行各种 代码检查以排除导致错误的变体。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 复选框。
