IntelliJ IDEA:Compass应用程序中的Sass和SCSS

2019-02-26 16:47 更新

Compass应用程序中的Sass和SCSS

此功能仅在Ultimate版本中受支持。

IntelliJ IDEA与Compass框架集成,因此Compass应用程序中的Sass或SCSS样式表可以即时编译成CSS。

使用准备

  1. 下载并安装Ruby

  2. 如“管理插件”中所述, 在“插件”页面上安装并启用“文件监视器”存储库插件。 

安装Compass

  • 打开嵌入式终端(Alt+F12)并在命令提示符下键入gem install compass。Compass安装在存储Ruby可执行文件和gem.bat文件的文件夹中。

从IntelliJ IDEA中的Compass应用程序开始

如果您还没有Compass应用程序,则可以创建它或向现有IntelliJ IDEA项目添加Compass支持。在任何一种情况下,都会生成conf.rb配置文件。

创建新的Compass应用程序

  • 打开嵌入式终端(Alt+F12),然后在命令提示符下键入compass create <the name of the application to be created>

将Compass添加到现有的IntelliJ IDEA项目

  1. 打开包含要使用Compass的代码的文件夹(单击“欢迎”界面上的“打开”或在主菜单上选择:文件|打开)。

  2. 打开嵌入式终端(Alt+F12),然后键入:

    cd <application folder>
    compass init

打开计算机上已有的应用程序源

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

从版本控制中检出应用程序源

  1. 单击“欢迎”屏幕上的“从版本控制中签出”或选择主菜单上的:VCS|从版本控制中查看。

  2. 从列表中选择您的版本控制系统。

  3. 在打开的特定于VCS的对话框中,键入您的凭据和存储库以检出应用程序源。

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

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

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

或者,你也可以在“设置/首选项”对话框(Ctrl + Alt + S)中,转到:语言和框架|样式表|Compass。

编译Sass和SCSS

要动态编译代码,需要将编译器配置为IntelliJ IDEA文件监视器。

提示:您也可以从命令行使用编译器或将其配置为第三方工具。

创建文件监视器

  1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“工具”下的“文件监视器”。打开的“文件监视器”页面显示已配置的文件监视器列表。

  2. 单击添加按钮或按下Alt+Insert。根据您要使用的工具,从列表中选择compass sass或compass scss预定义模板。将打开新的观察器对话框。

  3. 在“程序”文本框中,指定可执行文件的路径:
    • 适用于Windows:compass.bat

    • 适用于Unix和macOS:compass

  4. 在“参数”文本框中,根据使用的操作系统键入以下内容之一:
    • 对于macOS:
      • compile $ProjectFileDir$用于处理整个目录

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

    • 对于Windows:
      • compile $UnixSeparators($ProjectFileDir$)$用于处理整个目录

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

    • 对于Linux(Ubuntu):
      • compile $ProjectFileDir$用于处理整个目录

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

  5. 按照使用文件监视器中的说明继续操作。

编译代码

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

如果在当前项目中配置并启用了适用的文件观察器,则IntelliJ IDEA会在“新建观察器”对话框中指定的事件时自动启动它。

  • 如果选中“自动保存已编辑的文件以触发观察器”复选框,则只要对源代码进行任何更改,就会调用“文件观察器”。
  • 如果“自动保存已编辑的文件以触发观察器”复选框被清除,文件观察器是在保存(文件|全部保存,Ctrl+S),或者当你从IntelliJ IDEA移动对焦(帧停用时)启动。

IntelliJ IDEA使用生成的输出创建单独的文件。该文件具有源Sass或SCSS文件的名称和扩展名css。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是,在项目树中,它们显示在源文件下,该文件现在显示为节点。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号