Sass、SCSS 和更少
WebStorm 与将Sass、Less和SCSS代码转换为CSS的编译器集成在一起。要在 WebStorm 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher 。
在你开始前
安装 Sass/SCSS
在嵌入式终端( Alt+F12) 中，键入：
npm install -g sass从Sass 官方网站了解更多信息。
少安装
在嵌入式终端( Alt+F12) 中，键入：
npm install --global less从Less 官方网站了解更多信息。
将代码编译成 CSS
要自动编译您的代码，您需要配置一个Sass、Less 或 SCSS 文件观察器，它将跟踪对您的文件的更改并运行编译器。
当您打开文件时，WebStorm 会检查当前项目中是否有可用的文件观察器。如果此类 File Watcher 已配置但已禁用，WebStorm 会显示一个弹出窗口，通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher，WebStorm 会在New Watcher 对话框中指定的事件时自动启动编译器。
如果选中自动保存编辑的文件以触发观察程序复选框，则只要对源代码进行任何更改，就会调用文件观察程序。
如果清除了自动保存编辑的文件以触发观察程序复选框，则文件观察程序会在保存时启动（，Ctrl+S）或当您从 WebStorm 移动焦点时（在帧停用时）。
从File Watchers了解更多信息。
WebStorm 使用生成的输出创建一个单独的文件。该文件具有源Sass、Less或SCSS文件的名称和扩展名.css。生成文件的位置在New Watcher 对话框的Output paths to refresh字段中定义。但是，在Project Tree中，它们显示在现在显示为节点的源文件下。
创建文件观察器
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，单击Tools下的File Watchers。打开的File Watchers 页面显示已配置的 File Watchers 列表。
单击
或按Alt+Insert。根据您要使用的工具，从列表中选择Less、Sass或SCSS预定义模板。在Program字段中，根据所选的预定义模板指定编译器存档的路径。
lessc为少。
用于 Sass/SCSS 的sass 。
如果您使用 npm 遵循标准安装过程，WebStorm 会自行定位所需文件并自动填写该字段。否则，手动键入路径或单击
并在打开的对话框中选择文件位置。按照文件观察程序中的说明进行操作。
配置语法高亮
您可以根据自己的喜好和习惯配置 Less/Sass/SCSS 感知语法突出显示。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到。
选择配色方案，接受从默认值继承的突出显示设置，或按照颜色和字体中的说明自定义它们。