Sass、SCSS 和 Less
GoLand 可与将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器集成。 要在 GoLand 中使用编译器，需将其配置为基于相关预定义模板的 File Watcher。
安装 SASS 和 LESS 插件
要在 GoLand 中使用 SASS 和 LESS，请安装 JetBrains 提供的 SASS 和 LESS 插件。
打开 设置 | 插件。
点击 Marketplace。
在搜索字段中输入
Sass或Less，然后按 Enter。要安装插件，请点击 安装 并重新启动 GoLand。
安装 Sass/SCSS
在嵌入式 终端 （Alt+F12 ）中键入：
npm install -g sass请参阅 Sass 官方网站 了解更多信息。
安装 Less
在嵌入式 终端 （Alt+F12 ）中键入：
npm install --global less请参阅 Less 官方网站 了解更多信息。
将代码编译为 CSS
要自动编译代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS File Watcher ，它会跟踪文件的更改并运行编译器。
当您打开文件时，GoLand 会检查当前项目中是否有适用的 File Watcher。 如果已配置但未启用该 File Watcher，GoLand 将弹出提示，告知您已配置的 File Watcher，并建议启用它。
如果当前项目中已配置并启用了适用的 File Watcher，则 GoLand 会在 “新建监视器”对话框 中指定的事件发生时自动启动编译器。
如果选中 自动保存已编辑的文件以触发监视器 复选框，则在对源代码进行任何更改后会立即调用 File Watcher。
如果未选中 自动保存已编辑的文件以触发监视器 复选框，则在保存操作（、 Ctrl+S ）或从 GoLand 移开焦点（框架失去激活状态）时启动 File Watcher。
详细了解请参阅 文件监视器。
GoLand 会创建一个包含生成输出的单独的文件。 该文件的名称与源 Sass、 Less 或 SCSS 文件相同，并采用 .css 扩展名。 生成文件的位置在 “新建 Watcher”对话框 的 要刷新的输出路径 字段中定义。 不过，在 项目树 中，这些文件显示在现在作为节点显示的源文件下方。
创建 File Watcher
在 设置 对话框中（Ctrl+Alt+S ），点击 文件监视器 位于 工具 下。 打开的 “File Watchers” 页面 显示已配置的 File Watcher 列表。
点击
或按 Alt+Insert。 根据所要使用的工具，从列表中选择 Less、 Sass 或 SCSS 的预定义模板。在 程序 字段中，根据所选的预定义模板，指定编译器归档文件的路径。
用于 Less 的 lessc 。
用于 Sass/SCSS 的 sass 。
如果已使用 npm 完成标准安装流程，GoLand 会自动定位所需文件并自动填写该字段。 否则，请手动输入路径或点击
，然后在打开的对话框中选择文件位置。请按照 文件监视器 中所述操作。
示例：将 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 ，其中包含使您能够在调试会话中逐步调试应用的 source map
虽然默认设置已足以成功运行编译器，但我们仍然来详细了解一下这些设置，以查看如何自定义 File Watcher 的行为。
更改触发 File Watcher 的操作
File Watcher 会在您的项目手动（ 或 Ctrl+S ）或自动保存时立即启动并运行转译器。
通常，当您将焦点从 GoLand 移开（窗口失活）时，代码会自动保存。 使用 File Watcher 时，当您编辑 File Watcher 作用域中的文件时也会执行自动保存。 在这种情况下，每当您键入内容时，转译器可能持续运行，这可能会导致性能问题。 为解决此问题，请禁止自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（在此示例中为 SCSS ），然后单击工具栏上的 
。 在 编辑文件监视器 对话框中，展开 高级选项 区域并取消选中 自动保存已编辑的文件以触发监视器 复选框。
默认情况下，即使您在 GoLand 之外编辑了其作用域中的文件，File Watcher 也会被唤醒。 要更改此行为，仅在内部编辑时转译文件，请取消选中 在外部更改时触发监视器 复选框。
更改作用域
默认情况下，GoLand 会监视整个项目中具有 .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 。 我们来创建一个自定义的 SCSS_custom_output File Watcher，并将 css 文件夹作为输出位置。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 如上所述 的 SCSS File Watcher。
按如下方式更新默认设置：
在 参数 字段中键入：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中键入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新建的 File Watcher，并确保其已启用。
现在，如果您编辑 custom_output.scss ，例如将第 6 行中的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60); ，GoLand 将创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在我们来看一个示例，其中 .scss 文件存储在一个文件夹结构中，例如：
使用默认的 File Watcher 时，生成的文件将存储在原始 .scss 文件所在的位置。
如果使用自定义 File Watcher 如上所述 ，所有生成的文件将被存储在同一个 css 文件夹中：
为了让 GoLand 保留文件夹结构，我们将创建另一个自定义 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
保存新的 File Watcher 并确保已启用。
现在，如果您编辑 custom_output_body.scss 、 custom_output_header.scss 或 custom_output_footer.scss ，GoLand 会创建一个 css 文件夹，并包含一组子文件夹结构，以保留 styles_structured 的结构。
示例：将 Less 编译为 CSS
假设您的项目结构如下：
下面的示例展示了在手动或自动保存项目时，如何将 my-styles.less 编译为 CSS，以及对 my-styles.less 的更改如何反映在生成的 CSS 文件中。
创建类型为 Less 的 File Watcher：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏中的
，并从列表中选择 Less。
或者，点击编辑器选项卡顶部 启用文件监视器以将 LESS 编译为 CSS？ 面板中的 是 ，该面板包含一个 .less 文件。
在打开的 新建文件监视器 对话框中，所有必填字段都已填写。
实际上，这些设置已足以成功运行编译器。
让我们更改 my-styles.less ，例如更改第 1 行中
@color的值。 这将触发我们的 File Watcher。 结果，生成两个文件并嵌套显示在 my-styles.less 下：带有已编译 CSS 代码的 my-styles.css
包含 source map 的 my-styles.css.map ，可在调试会话中逐步调试应用程序。
虽然默认设置已足以成功运行编译器，但我们仍然仔细查看这些设置，以了解如何自定义 File Watcher 的行为。
更改触发 File Watcher 的操作
File Watcher 会在项目手动（ 或 Ctrl+S ）或自动保存时立即唤醒并启动转译器。
通常，在您从 GoLand 切换焦点（窗口失活）时，代码会自动保存。 使用 File Watcher 编辑该作用域中的文件时也会自动保存。 因此，每当您键入时转译器可能会始终运行，这可能会导致性能问题。 为解决此问题，请关闭自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（在此示例中为 Less ），然后点击工具栏中的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域并取消选中 自动保存已编辑文件以触发监视器 复选框。
更改作用域
默认情况下，GoLand 会监视整个项目中所有扩展名为 .scss 的文件的更改。 这适用于本示例。 不过，您可以更改作用域，例如只处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（在此示例中为 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 。 让我们创建一个自定义 Less_custom_output File Watcher，并将 css 文件夹作为输出位置。
按下 Ctrl+Alt+S 打开设置界面，然后选择 。 然后根据上文所述创建一个 Less File Watcher as described above。
如下更新默认设置：
在 参数 字段中，键入：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新的 File Watcher，并确保其已启用。
此时，如果您编辑 custom_output.less ，例如更改第 1 行中 @color 的值，GoLand 将创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储其中。
自定义输出位置：保留原始文件夹结构
现在让我们来看一个示例，其中 .less 文件存储在文件夹结构中，例如：
使用默认的 File Watcher，生成的文件将与原始 .less 文件放在一起。
如果我们使用自定义 File Watcher as described above ，所有生成的文件都将存储在同一个 css 文件夹中：
为使 GoLand 保留文件夹结构，让我们创建另一个自定义 File Watcher。
按下 Ctrl+Alt+S 打开设置界面，然后选择 。 然后根据上文所述创建一个 Less File Watcher as described above。
如下更新默认设置：
在 参数 字段中，键入：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
保存新的 File Watcher，并确保其已启用。
此时，如果您编辑 custom_output_body.less 、 custom_output_header.less 或 custom_output_footer.less ，GoLand 将创建一个 css 文件夹，并包含保留 styles_structured 结构的子文件夹。
配置语法高亮
您可以根据自己的偏好和使用习惯配置 Less／Sass／SCSS 感知的语法高亮。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择颜色方案，接受默认继承的高亮设置，或按照 颜色与字体 中所述进行自定义。
云补全与整行补全
GoLand 在 Sass／SCSS 和 Less 代码中提供 Cloud Completion 和 Full Line completion 功能。
Full Line 代码补全功能使用本地运行的深度学习模型来建议完整的代码行。 此功能在 GoLand 中开箱即用，无需额外许可。
启用整行代码补全
按下 Ctrl+Alt+S 打开设置界面，然后选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框，并确保选中 类似 CSS 复选框。
由 AI 助手 提供支持的 Cloud Completion 可以根据项目上下文实时补全单行、代码块甚至整个函数。
Cloud Completion 会结合上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除可能导致错误的选项。
启用云补全
按下 Ctrl+Alt+S 打开设置界面，然后选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 复选框。
