Sass、SCSS 和 Less | PyCharm 文档

在开始之前

请确保您的计算机上安装了 Node.js。
请确保在设置 | 插件页面、已安装选项卡上启用了所需的 CSS、 Sass、 Less 和 File Watchers 插件。有关更多信息，请参阅管理插件。

安装 Sass/SCSS

在嵌入的终端 (Alt+F12 )中，输入：
npm install -g sass
了解更多信息，请访问 Sass 官方网站。

安装 Less

在嵌入的终端 (Alt+F12 )中，输入：
npm install --global less
详细了解请访问 Less 官方网站。

将您的代码编译为 CSS

要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器，该监视器将跟踪文件的更改并运行编译器。

当您打开一个文件时，PyCharm会检查当前项目中是否有适用的 File Watcher。如果此类 File Watcher 已配置但已禁用，PyCharm 会显示一个弹出窗口，通知您已配置的 File Watcher 并建议启用它。

如果在当前项目中配置并启用了适用的 File Watcher，则 PyCharm 会在新建监视器对话框中指定的事件发生时自动启动编译器。

如果选中了自动保存已编辑的文件以触发监视器复选框，一旦对源代码进行了任何更改，就会调用 File Watcher。
如果自动保存已编辑的文件以触发监视器复选框被清除，File Watcher 会在保存时（文件 | 全部保存， Ctrl+S ）或当您将焦点从 PyCharm 移开时（当框架失去焦点时）启动。

请从文件监视器了解更多。

PyCharm 会创建一个包含生成输出的单独文件。该文件的名称与源 Sass、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。生成文件的位置是在要刷新的输出路径字段中的 New Watcher 对话框中定义的。然而，在项目树，它们显示在源文件下，现在显示为一个节点。

创建文件监视器

在设置对话框（Ctrl+Alt+S ）中，点击文件监视器下的工具。 File Watchers 页面显示了已配置的 File Watchers 列表。
点击或按 Alt+Insert。根据您将要使用的工具，从列表中选择 Less、 Sass 或 SCSS 预定义模板。
在程序字段中，根据所选择的预定义模板指定编译器归档的路径。
- lessc 用于 Less。
- sass 适用于 Sass/SCSS。
如果您按照标准的 npm 安装程序进行操作，PyCharm 会自动定位所需文件并自动填写字段。否则，请手动输入路径或点击在打开的对话框中选择文件位置。
请按照文件监视器中的描述进行操作。

示例：将 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;。这将触发我们的 File Watcher，编译器将处理 Page.scss 。因此，会生成两个文件，并显示在 Page.scss 下：
- Page.css 及编译后的 CSS 代码
- Page.css.map 使用源映射，允许您在调试会话期间逐步执行应用程序。

尽管默认设置足以成功运行编译器，但我们仍然仔细看看它们，以了解如何自定义 File Watcher 的行为。

更改触发文件观察者的操作

文件监视器会在您的项目被手动（文件 | 全部保存或 Ctrl+S ）或自动保存后立即启动编译器。

通常，当您从 PyCharm 移动焦点时（框架停用时），您的代码会自动保存。使用 File Watchers 时，当您编辑 File Watcher 作用域内的文件时，也会自动保存。因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。要解决这个问题，请禁止自动保存编辑过的文件。

按下 Ctrl+Alt+S 打开设置，然后选择工具 | 文件监视器。请选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的。在编辑文件监视器对话框中，展开高级选项区域，并清除自动保存已编辑的文件以触发监视器复选框。

默认情况下，即使从 PyCharm 外部编辑其作用域内的文件，File Watcher 仍会启动。要重写此行为并仅在内部编辑时编译文件，请清除在外部更改时触发监视器复选框。

更改作用域

默认情况下，PyCharm 会监视整个项目中所有带有 .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 文件监视器，并将 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 文件存储在文件夹结构中，例如：

默认的 File Watcher 会将生成的文件存储在原始 .scss 文件旁边。

如果我们使用自定义 File Watcher，如上所述，所有生成的文件将存储在同一个 css 文件夹中：

为了让 PyCharm 保留文件夹结构，我们再创建一个自定义的 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 ，PyCharm 将创建一个 css 文件夹，子文件夹结构将保留样式结构的结构。

示例：将 Less 编译成 CSS

假设，您的项目结构如下：

下面的示例展示了当您手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何反映在生成的 CSS 文件中。

创建一个类型为 Less 的文件监视器：打开设置对话框（Ctrl+Alt+S ），转到工具 | 文件监视器，点击工具栏上的，并从列表中选择 Less。
或者，点击是在编辑器选项卡顶部的启用文件监视器以将 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 ）或自动保存后立即启动编译器。

通常，当您从 PyCharm 移动焦点时（框架停用时），您的代码会自动保存。使用 File Watchers 时，当您编辑 File Watcher 作用域内的文件时，也会自动保存。因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。要解决这个问题，请禁止自动保存编辑过的文件。

按下 Ctrl+Alt+S 打开设置，然后选择工具 | 文件监视器。请选择所需的 File Watcher（Less 在我们的示例中），然后点击工具栏上的。在编辑文件监视器对话框中，展开高级选项区域，并清除自动保存已编辑的文件以触发监视器复选框。

更改作用域

默认情况下，PyCharm 会监视整个项目中所有带有 .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 。让我们创建一个自定义自定义输出较少文件监视器，并将 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 的值，PyCharm 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。

自定义输出位置：保留原始文件夹结构

现在让我们考虑一个示例，其中 .less 文件存储在文件夹结构中，例如：

默认的 File Watcher 会将生成的文件存储在原始 .less 文件旁边。

如果我们使用自定义 File Watcher，如上所述，所有生成的文件将存储在同一个 css 文件夹中：

为了让 PyCharm 保留文件夹结构，我们再创建一个自定义的 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