Compass 应用程序中的 Sass 和 SCSS
最后修改时间:2023 年 9 月 7 日警告
自 IntelliJ IDEA 2020.1 起,IDE 中的 Compass 支持已被弃用。
但是,指南针支持仍然可以通过指南针插件获得,该插件可以安装在“设置”|“指南针”中。插件页面,如从 JetBrains Marketplace 安装插件中所述。
借助IntelliJ IDEA 中的Compass 支持,Compass 应用程序中的 Sass 或 SCSS 样式表会自动编译为 CSS。
在你开始之前
在设置 |安装指南针和文件观察器插件 插件页面,选项卡Marketplace ,如从 JetBrains Marketplace 安装插件中所述。
安装指南针
在嵌入式终端( ) 中,键入:AltF12
gem install compass
Compass 安装在存储 Ruby 可执行文件和gem.bat文件的文件夹中。
创建新的指南针应用程序
如果您还没有 Compass 应用程序,您可以创建它或将 Compass 支持添加到空的 IntelliJ IDEA 项目中。无论哪种情况,都会生成conf.rb配置文件。
在嵌入式终端( ) 中,键入:AltF12
compass create <the name of the application to be created>
创建一个空的 IntelliJ IDEA 项目,打开嵌入式终端( ),然后输入:AltF12
cd <application folder> compass init
在您的应用程序中激活指南针感知支持
打开.sass或.scss文件,单击语句旁边的红色灯泡
@import 'compass'
或按,然后从建议列表中选择配置指南针。AltEnter提示
或者,在“设置”对话框 ( ) 中,转至语言和框架 | 样式表| 指南针。CtrlAlt0S
选择启用 Compass 支持复选框,并指定 Compass 可执行文件和conf.rb配置文件的路径。
从现有的 Compass 应用程序开始
打开计算机上已有的应用程序源
单击欢迎屏幕上的“打开”或“导入”,或选择“文件”|“导入”。从主菜单打开。在打开的对话框中,选择存储源的文件夹。
从版本控制中检查应用程序源
单击欢迎屏幕上的从 VCS 获取。
或者,选择文件 | 新 | 来自版本控制或Git 的项目| 从主菜单克隆...。
您可能会看到与您的项目关联的任何其他版本控制系统,而不是主菜单中的Git 。例如,Mercurial或Perforce。
在打开的对话框中,从列表中选择您的版本控制系统,并指定用于检查应用程序源的存储库。有关更多信息,请参阅查看项目(克隆)。
编译 Sass 和 SCSS
要自动编译代码,您需要安装编译器并配置Compass Sass 或 Compass SCSS 文件观察器,它将跟踪文件的更改并运行编译器。
提示
您还可以从命令行使用编译器或将其配置为第三方工具。有关更多信息,请参阅配置第三方工具。
当您打开文件时,IntelliJ IDEA 会检查当前项目中是否有适用的文件观察器。如果此类文件观察器已配置但被禁用,IntelliJ IDEA 将显示一个弹出窗口,通知您有关已配置的文件观察器并建议启用它。
如果在当前项目中配置并启用了适用的文件观察器,IntelliJ IDEA 会根据“新建观察器”对话框中指定的事件自动启动编译器。
如果选中“自动保存已编辑的文件以触发观察器”复选框,则只要对源代码进行任何更改,就会调用文件观察器。
如果清除自动保存已编辑的文件以触发观察器复选框,则文件观察器将在保存时启动(文件 | 全部保存,)或当您从 IntelliJ IDEA 移动焦点时(在框架停用时)。Ctrl0S
从文件观察者了解更多信息。
IntelliJ IDEA 使用生成的输出创建一个单独的文件。该文件具有源 Sass 或 SCSS 文件的名称和扩展名.css。生成文件的位置在“新建观察程序”对话框的“刷新输出路径”字段中定义。但是,在项目树中,它们显示在源文件下,源文件现在显示为节点。
创建文件观察器
在“设置”对话框 ( ) 中,单击“工具”下的“文件观察器”。打开的文件观察器页面显示已配置的文件观察器的列表。CtrlAlt0S
单击或按。根据您要使用的工具,从列表中选择compass sass或compass scss预定义模板。“新建观察程序”对话框打开。AltInsert
在“程序”字段中,指定可执行文件的路径:
适用于 Windows 的compass.bat
适用于 Unix 和 macOS 的指南针
在“参数”字段中,根据所使用的操作系统键入以下内容之一:
视窗苹果系统Linux(Ubuntu)compile $UnixSeparators($ProjectFileDir$)$
处理整个目录compile $UnixSeparators($FilePath$)$
处理单个文件
compile $ProjectFileDir$
处理整个目录compile $ProjectFileDir$ $FilePath$
处理单个文件
compile $ProjectFileDir$
处理整个目录compile $ProjectFileDir$ $FilePath$
处理单个文件
按照文件观察程序中的说明继续操作。
感谢您的反馈意见!