PhpStorm 2021.3 Help

Sass、SCSS 和更少

PhpStorm 与将SassLessSCSS代码转换为CSS的编译器集成在一起。要在 PhpStorm 中使用编译器,您需要根据相关的预定义模板将其配置为 File Watcher 。

在你开始前

  1. 确保您的计算机上有Node.js。

  2. 确保在Settings/Preferences |上启用了File WatchersLessSass所需的插件。插件页面,选项卡Installed,有关详细信息,请参阅管理插件

安装 Sass/SCSS

  • 在嵌入式终端( Alt+F12) 中,键入:

    npm install -g sass

    Sass 官方网站了解更多信息。

少安装

  • 在嵌入式终端( Alt+F12) 中,键入:

    npm install --global less

    Less 官方网站了解更多信息。

将代码编译成 CSS

要自动编译您的代码,您需要配置一个Sass、Less 或 SCSS 文件观察器,它将跟踪对您的文件的更改并运行编译器。

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

如果在当前项目中配置并启用了适用的 File Watcher,PhpStorm 会在New Watcher 对话框中指定的事件时自动启动编译器。

  • 如果选中自动保存编辑的文件以触发观察程序复选框,则只要对源代码进行任何更改,就会调用文件观察程序。

  • 如果清除了自动保存编辑的文件以触发观察程序复选框,则文件观察程序在保存时启动(文件|全部保存Ctrl+S)或当您从 PhpStorm 移动焦点时(在帧停用时)。

从File Watchers了解更多信息。

PhpStorm 使用生成的输出创建一个单独的文件。该文件具有源SassLessSCSS文件的名称和扩展名.css。生成文件的位置在New Watcher 对话框的Output paths to refresh字段中定义。但是,在Project Tree中,它们显示在现在显示为节点的源文件下。

创建文件观察器

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,单击Tools下的File Watchers。打开的File Watchers 页面显示已配置的 File Watchers 列表。

  2. 单击添加按钮或按Alt+Insert。根据您要使用的工具,从列表中选择LessSassSCSS预定义模板。

  3. Program字段中,根据所选的预定义模板指定编译器存档的路径。

    • lessc为少。

    • 用于 Sass/SCSS 的sass 。

    如果您使用 npm 遵循标准安装过程,PhpStorm 会自行定位所需文件并自动填写该字段。否则,手动键入路径或单击浏览按钮并在打开的对话框中选择文件位置。

  4. 按照文件观察程序中的说明进行操作。

配置语法高亮

您可以根据自己的喜好和习惯配置 Less/Sass/SCSS 感知语法突出显示。

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 配色方案 | 少/萨斯/SCSS

  2. 选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。

最后修改时间:2021 年 10 月 20 日