阅读时间 4 分钟 (704 字)

LESS 工具

Tools für LESS

在 David Hurley 关于 LESS 的概述(即:在 Joomla 中使用 LESS,从而减少工作量)之后,以下是关于简化使用 LESS 进行网页设计和编码的程序和工具的汇总。特别适合那些来自 CSS 世界,并需要了解 LESS 的人。本文将介绍一些在我们公司(PB 网络开发)实习期间,实习生在使用 LESS 和 Joomla!过程中遇到的一些工具。

代码高亮器

首先,我们可以使用带有代码高亮的编辑器。Adobe Dreamweaver 仍然非常受欢迎。虽然它是过去的遗物,可能会让程序员望而却步,但对于新手或具有设计背景的人来说,它仍然是一个不错的选择——在决定使用更健壮的代码编辑器,如 Eclipse、NetBeans 或 PHPStorm 之前。

Dreamweaver 内置了良好的 CSS 代码高亮器,也提供了一个不错的代码补全器,但 LESS 的使用并不直接。

此外,还需要一个 Dreamweaver 扩展来识别 LESS 元素。Adobe 网站提供了相应的扩展,即LESS 代码高亮扩展

另一个在 Mac 上非常受欢迎的图形代码编辑器是 Coda 2,它有一个非常漂亮的 LESS 代码语法高亮模块 作为附加组件。

接下来,我们需要一个 LESS 编译器。旧的浏览器无法处理 LESS,因此无法渲染看起来像是 LESS 的内容(函数、混入等)。

LESS 编译器

当完成 LESS 代码编写后,我们面临的问题是无法在将其编译为 CSS 之前对其进行测试。一些 Joomla!模板框架内置了 LESS 编译器,这简化了动态测试。但在本地机器或开发环境中进行测试可能有些困难。

这里可以使用一个独立的LESS编译器来帮助。

CrunchApp

CrunchApp是一款简单快捷的应用程序,不仅可以编译LESS,还可以帮助查找语法错误。在LESS文件中寻找缺失的大括号是非常令人烦恼的。

SimpleLess

SimpleLess工具在Windows和MAC上都能运行,允许通过拖放来编译LESS文件。该应用程序会监视文件的变化,并在变化后重新编译,这样每次更改后都可以立即进行测试。这种自动化避免了每次更改后都需要重新启动编译器的额外步骤。

Dreamweaver LESS编译器

Dreamweaver LESS编译器并不是最好的,也不是在所有情况下都能工作。我们使用它并没有太多的运气,但如果有人有好的经验,我们很高兴了解。

WinLess

对于Windows开发者来说,WinLESS是一个很好的工具,可以自动将目录中的所有LESS文件编译成CSS。该软件会监视目录,所有更改都会立即编译。

在线Win编译器

对于偶尔的使用,可以使用WinLess的快速测试在线LESS编译器。这是一个快速且简单的编译器,还可以突出显示错误。

突出显示器和编译器套件

最后——在功能的一端——对于不太受代码特定开发环境影响的资深开发者,有PHPStorm。为此,有LESS突出显示器和编译器等许多其他附加组件,所有这些都在PHPStorm内部工作。不过,该编辑器需要付费。

在开源前端也有流行的替代品,它们在突出显示和编译方面同样强大。

对于NetBeans,一个非常受欢迎的编辑器,有一个LESS插件可以安装到编辑器中。

对于另一个流行的编辑器Eclipse,也有LESS突出显示和编译器

因此,几乎为每种编辑器风格都提供了用于使用LESS进行工作和编码的有用工具。

还在学习Less吗?

这没关系,而且当然,现在学习LESS是一个好主意。许多模板开发者也在同样的方向上移动。学习和使用LESS来加速开发和实现过程对于构建网站来说将变得越来越重要。

最好从https://lesscss.org.cn/开始,了解LESS的基本概念。

 

本文最初由Peter Bui撰写,并发表在Joomla!社区杂志2013年5月上。

发表在Joomla!社区杂志上的一些文章代表了作者对特定主题的个人意见或经验,可能不符合Joomla!项目的官方立场。

0
Joomla 3. 开发者新功能. 实践时间...
使用LESS的工具
 

评论

已注册? 在此登录
尚未发表评论。成为第一个发表评论的人

通过接受,您将访问由https://magazine.joomla.net.cn/之外的第三方提供的服务