Sass、SCSS 和 Less
PyCharm 可与将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器集成。 要在 PyCharm 中使用编译器，您需要基于相应的预定义模板将其配置为 文件监视器。
开始之前
安装 Sass/SCSS
在嵌入的 终端 （Alt+F12 ）中，键入：
npm install -g sass在 Sass 官方网站了解详情。
安装 Less
在嵌入的 终端 （Alt+F12 ）中，键入：
npm install --global less在 Less 官方网站了解详情。
将您的代码编译为 CSS
要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器 ，用于跟踪对文件的更改并运行编译器。
PyCharm 在您打开文件时会检查当前项目中是否有可用的文件监视器。 如果已配置此类文件监视器但处于禁用状态，PyCharm 会显示一个弹出窗口，告知您已配置的文件监视器并建议启用它。
如果在当前项目中已配置并启用了适用的文件监视器，PyCharm 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中 自动保存已编辑的文件以触发监视器 复选框，则在对源代码进行任何更改后会立即调用文件监视器。
如果清除 自动保存已编辑的文件以触发监视器 复选框，则会在保存时（、 Ctrl+S ）或将焦点从 PyCharm 移开时（框架停用时）启动文件监视器。
了解更多内容，请参阅 文件监视器。
PyCharm 会创建一个包含生成输出的单独文件。 该文件的名称与源 Sass、 Less 或 SCSS 文件相同，扩展名为 .css 。 生成文件的位置在 新建监视器对话框 的 要刷新的输出路径 字段中定义。 不过，在 项目树 中，它们会显示在源文件下方，源文件现在显示为一个节点。
创建文件监视器
，并在打开的对话框中选择文件位置。示例：将 SCSS 编译为 CSS
假设您的项目结构如下：
如您所见， _grid.scss 被导入到 Page.scss 中。 以下示例演示在手动或自动保存项目时， Page.scss 如何编译为 CSS，以及对 _grid.scss 的更改如何反映到生成的 CSS 文件中。
创建类型为 SCSS 的文件监视器：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏中的
，并在列表中选择 SCSS。
在打开的 新建文件监视器 对话框中，所有必填字段已预先填写。
实际上，这些设置已足以成功运行编译器。
让我们更改 grid.scss ，例如，将第 31 行的
margin-left: 0;替换为margin-left: 12px;。 这会触发我们的文件监视器，编译器会处理 Page.scss 。 结果会生成两个文件，并显示为嵌套在 Page.scss 下方：Page.css ，其中包含已编译的 CSS 代码
Page.css.map ，其中包含源映射，使您能够在调试会话期间单步执行应用。
尽管默认设置足以成功运行编译器，但我们仍然仔细查看这些设置，以了解如何自定义文件监视器的行为。
更改触发文件监视器的操作
只要您的项目被手动（ 或 Ctrl+S ）或自动保存，文件监视器就会唤醒并启动转译器。
通常，当您将焦点从 PyCharm 移开时（框架停用时），代码会自动保存。 使用文件监视器时，当您编辑其作用域内的文件时也会执行自动保存。 因此，在您键入期间，转译器可能会一直运行，从而导致性能问题。 为解决此问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件监视器（在我们的示例中为 SCSS ），并点击工具栏中的 
。 在 编辑文件监视器 对话框中，展开 高级选项 区域并清除 自动保存已编辑的文件以触发监视器 复选框。
默认情况下，即使其作用域内的文件在 PyCharm 外部被编辑，文件监视器也会唤醒。 要覆盖此行为并仅在内部编辑时进行转译，请清除 在外部更改时触发监视器 复选框。
更改作用域
默认情况下，PyCharm 会监控整个项目中所有具有 .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 文件监视器 如上所述。
按如下方式更新默认设置：
在 参数 字段中，键入：
$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); ，PyCharm 创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在，我们来看一个示例，其中 .scss 文件存储在文件夹结构中，例如：
使用默认的文件监视器，生成的文件将存储在原始 .scss 文件旁边。
如果我们使用自定义的文件监视器 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
要使 PyCharm 保留文件夹结构，我们再创建一个自定义文件监视器。
按 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 ，PyCharm 创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。
示例：将 Less 编译为 CSS
假设您的项目结构如下：
以下示例演示在手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何反映到生成的 CSS 文件中。
创建类型为 Less 的文件监视器：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏中的
，并在列表中选择 Less。
或者，在包含 .less 文件的编辑器选项卡顶部的 启用文件监视器以将 LESS 编译为 CSS 吗？ 窗格中点击 是。
在打开的 新建文件监视器 对话框中，所有必填字段已预先填写。
实际上，这些设置已足以成功运行编译器。
让我们更改 my-styles.less ，例如，更改第 1 行的
@color的值。 这会触发我们的文件监视器。 结果会生成两个文件，并显示为嵌套在 my-styles.less 下方：my-styles.css ，其中包含已编译的 CSS 代码
my-styles.css.map ，其中包含源映射，使您能够在调试会话期间单步执行应用。
尽管默认设置足以成功运行编译器，但我们仍然仔细查看这些设置，以了解如何自定义文件监视器的行为。
更改触发文件监视器的操作
只要您的项目被手动（ 或 Ctrl+S ）或自动保存，文件监视器就会唤醒并启动转译器。
通常，当您将焦点从 PyCharm 移开时（框架停用时），代码会自动保存。 使用文件监视器时，当您编辑其作用域内的文件时也会执行自动保存。 因此，在您键入期间，转译器可能会一直运行，从而导致性能问题。 为解决此问题，请抑制自动保存已编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件监视器（在我们的示例中为 Less ），并点击工具栏中的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域并清除 自动保存已编辑的文件以触发监视器 复选框。
更改作用域
默认情况下，PyCharm 会监控整个项目中所有具有 .scss 扩展名的文件的更改。 这适用于我们的示例。 不过，您可以更改作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的文件监视器（在我们的示例中为 Less ），并点击工具栏中的 。 在 编辑文件监视器 对话框中，从列表中选择适用的作用域。 了解更多内容，请参阅 作用域和文件颜色。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件会存储在原始文件所在的文件夹中，并在 项目 工具窗口 Alt+1 中显示为其子项。 您可以更改此默认行为，将所有生成的 .css 和 .css.map 文件存储到单独的文件夹中。
我们先从一个简单的情况开始。 假设项目根目录中有一个 custom_output.less 文件。
我们来编辑 custom_output.less ，例如，更改第 1 行的 @color 的值。 使用默认的文件监视器配置，生成的 custom_output.css 和 custom_output.css.map 文件将存储在项目根目录中，并显示为 custom_output.less 的子项。
将所有输出存储到单独的文件夹（例如 css ）中会更方便。 让我们创建一个自定义的 Less_custom_output 文件监视器，并将 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 的值，PyCharm 创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在，我们来看一个示例，其中 .less 文件存储在文件夹结构中，例如：
使用默认的文件监视器，生成的文件将存储在原始 .less 文件旁边。
如果我们使用自定义的文件监视器 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
要使 PyCharm 保留文件夹结构，我们再创建一个自定义文件监视器。
按 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 ，PyCharm 创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。
配置语法高亮
您可以根据自己的偏好和习惯配置支持 Less/Sass/SCSS 的语法高亮。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择配色方案，接受从默认值继承的高亮设置，或按 颜色与字体 中所述自定义这些设置。
云补全和整行代码补全
PyCharm 在 Sass/SCSS 和 Less 代码中提供 云补全 和 整行代码补全。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 PyCharm 中开箱即用，无需额外许可。
启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框，并确保已选中 类似 CSS 复选框。
AI Assistant 提供的云补全可根据项目上下文实时自动完成单行、代码块甚至整个函数。
云补全会在考虑上下文的情况下建议语法可接受的解决方案，并预先运行各种 代码检查 以拒绝会导致错误的变体。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框，并确保已选中 HTML 复选框。
