用Phpstorm编译Sass

用Phpstorm编译Sass

2014年6月10日发布 in 发展历程
在Magento上实现高分辨率图像’的本机响应主题
2014年5月27日
深入了解Magento主题后备广告
2014年8月5日

当我们构建新的Magento响应主题时,我们决定使用Sass作为CSS预处理器,并使用Compass作为编译器(技术上称为 转译器)。 Sass是支持mixin,变量和嵌套的基本语法,而Compass是扩展Sass的编译器’通过添加CSS3 mixin的功能,我们用来使响应主题与旧版浏览器兼容。这是TL; DR信息图:

CSS vs Sass vs Compass-美国队长风格
Image Source: http://sonspring.com/journal/sass-for-designers

您可以在上阅读有关使用新的自适应主题的所有基础知识。 Magento知识库。在本文中,我们’我们将更深入地研究如何在命令行和通过PhpStorm使用Compass进行编译。

 

本文假设您’ve gone through the Magento RWD文档 并且您在皮肤/前端/ 定制包装 / 习惯主题上有一个自定义的Magento主题设置。

命令行指南针

在使用Compass进行编译之前,您需要 安装命令行实用程序。在你之后’安装了Compass后,可以通过运行以下命令进行编译:
指南针编译 <MAGENTO_DIRECTORY>/skin/frontend/custompackage/customtheme
该命令会将您的.scss文件编译为.css文件,但是每次对.scss文件进行更改时,您都必须运行此命令。要在每次更改时自动重新编译.scss文件,可以运行以下命令:
罗盘 watch <MAGENTO_DIRECTORY>/skin/frontend/custompackage/customtheme

虽然知道Compass如何在命令行上工作很有价值,但是许多开发人员使用他们的IDE或独立的GUI应用程序(例如 侦察 要么 代码包)与Compass一起编译。如果您打算使用Sass / Compass进行大量的前端开发,我鼓励您尝试不同的选项,并选择与您的工作流程最集成的方法。我使用PhpStorm,这就是我用来用Compass编译的东西。

在PhpStorm中编译Compass

PhpStorm似乎已成为Magento后端开发人员的事实上的IDE,因为它对语法突出显示,自动完成和调试等功能的出色支持。但是,我对使用面向Php的IDE进行前端开发表示怀疑,因为我以前对健壮的IDE(如Eclipse / PDT)的经验很笨拙。在PhpStorm之前,我使用CSSEdit / Espresso / TextMate之类的应用程序进行前端开发。但是,我发现PhpStorm对于前端开发很高兴,因为它提供了CSS / HTML验证,Sass变量自动完成和通过它快速创建HTML标记等功能。 实时模板。现在,这是我用于前端和后端开发的IDE。

PhpStorm具有一项称为“File Watcher”这样,您可以在更改.scss文件时自动运行Compass。此功能的工作方式是,只要您在PhpStorm中对.scss文件进行更改,PhpStorm都会对“compass 编译”。以下是设置此功能的步骤:

  1. 去“PhpStorm > Preferences” (Cmd + ,)
  2. 类型“File Watchers”在过滤器输入中,点击“+”图标,然后单击“compass 脚本” 暴风雨文件观察者 Creation
  3. Configure the 文件观察者 with these settings: 暴风雨文件观察者 Compass Configuration
    值得注意的设置:

    • 立即文件同步:取消选中此选项,以使PhpStorm不会’t编译,直到您真正保存文件为止。如果PhpStorm尝试在您重新编译时会很烦人’re typing.
    • 触发器观察器,无论语法错误:PhpStorm很聪明。它知道代码中何时有错误,并且可以将File Watcher配置为仅在代码无错误时才进行编译。但是我发现该功能令人困惑-启用该功能后,我通常会进行更改,保存文件,翻转到前端以等待CSS刷新(通过 LiveReload),只是在一分钟后才意识到.scss文件不是’t由于错误而编译。在禁用此选项的情况下,PhpStorm将尝试编译您的.scss文件,并会引发明显的错误,我认为这会有所帮助: 暴风雨文件观察者 Error
    • 程序:这告诉PhpStorm运行哪个命令行实用程序。由于PhpStorm只是运行命令行“compass” utility, enter “compass” 在to this field.
    • 争论:此字段包含传递给“compass”上面的命令。该字段需要包含自定义主题相对于PhpStorm目录根目录的位置。
    • 工作目录:PhpStorm将从此输入中获取值,并在运行指南针命令时将其用作工作目录。注意:您必须使用“Insert Macro…”按钮。如果您只输入“$ProjectFileDir$” text, 暴风雨won’t recognize it.

    因此,根据上述配置屏幕截图,PhpStorm实际上将在更改.scss文件的任何时间运行以下命令:

If you have multiple themes for which you need to 编译 .scss files, you simply need to setup 文件观察者s for each theme. For example: Compass 文件观察者 Multiple Themes

如果执行以下步骤,则在PhpStorm中进行任何更改时都应编译.scss文件!

1 评论

  1. 塞缪尔·休斯·门萨 说:

    您能做一个关于如何创建自定义Filewatcher的教程吗

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日

Covid世界中的假日销售:应对挑战

毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]
2020年8月7日

涡轮增压ZZPerformance的付费搜索

2020年7月30日

Intermix用经典的Llama加速器击败了M1使用寿命