WebStorm 2021.1 Help

Compass 应用程序中的 Sass 和 SCSS

借助WebStorm 中的Compass 支持,您在 Compass 应用程序中的 Sass 或 SCSS 样式表会自动编译成 CSS。

在你开始前

  1. 下载并安装 Ruby

  2. 在Settings/Preferences |上安装并启用Compass插件 插件页面,选项卡Marketplace,如从 JetBrains 存储库安装插件中所述。

  3. 确保在Settings/Preferences |上启用了File Watchers插件。插件页面,标签Installed。有关详细信息,请参阅管理插件

安装指南针

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

    gem install compass

    Compass 安装在存储 Ruby 可执行文件和gem.bat文件的文件夹中。

创建一个新的 Compass 应用程序

如果您还没有 Compass 应用程序,您可以创建它或将 Compass 支持添加到一个空的 WebStorm 项目。无论哪种情况,都会生成一个conf.rb配置文件。

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

    compass create <the name of the application to be created>

  • 如创建项目中所述创建一个空的 WebStorm 项目打开嵌入式终端( Alt+F12),然后键入:

    cd <应用程序文件夹> 罗盘初始化

在您的应用程序中激活 Compass 感知支持

  1. 打开.sass.scss文件,单击语句旁边的红色灯泡@import 'compass'或按Alt+Enter,然后从建议列表中选择配置 Compass 。

  2. 选中启用 Compass 支持复选框,并指定 Compass 可执行文件和conf.rb配置文件的路径。

从现有的 Compass 应用程序开始

打开您机器上已有的应用程序源

  • 欢迎屏幕上单击打开或选择文件 | 从主菜单打开。在打开的对话框中,选择存储源的文件夹。

从您的版本控制中查看应用程序源

  1. 欢迎屏幕上单击从 VCS 获取。或者,选择文件 | 来自版本控制<Your_VCS> 的项目 | 从主菜单中获取版本控制。

    <Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。

  2. 在打开的对话框中,从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息,请参阅签出项目(克隆)

编译 Sass 和 SCSS

要自动编译您的代码,您需要配置Compass Sass 或 Compass SCSS File Watcher,它将跟踪文件更改并运行编译器。

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

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

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

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

从File Watchers了解更多信息。

WebStorm 使用生成的输出创建一个单独的文件。该文件具有源 Sass 或 SCSS 文件的名称和扩展名.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。根据您要使用的工具,从列表中选择compass sasscompass scss预定义模板。“新建观察者”对话框打开。

  3. Program字段中,指定可执行文件的路径:

    • compass.bat用于 Windows

    • 适用于 Unix 和 macOS 的指南针

  4. Arguments字段中,根据使用的操作系统键入以下内容之一:

    • compile $UnixSeparators($ProjectFileDir$)$处理整个目录

    • compile $UnixSeparators($FilePath$)$处理单个文件

    • compile $ProjectFileDir$处理整个目录

    • compile $ProjectFileDir$ $FilePath$处理单个文件

    • compile $ProjectFileDir$处理整个目录

    • compile $ProjectFileDir$ $FilePath$处理单个文件

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

最后修改:2021 年 9 月 14 日