软件工程师-快速编写html跟css的工具集合文档.docxVIP

在这篇文章中，我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。 AD： 你曾经考虑过想要加快 HTML 和 CSS 编码速度吗?不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是 CSS 网格框架，也不是 CSS Reset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。 HTML 加快HTML 编码的方法有很多，这里我们要介绍的是 HTML 缩写技术。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成div id=container/div。实现 HTML 缩写技术，有两种著名的解决方案——Zen Coding 和 HAML。 HYPERLINK /p/zen-coding/ \t _blank Zen Coding Zen Coding 是一个用于快速编写 HTML，CSS，XML，XSL 或者其他结构化格式语言编码的插件，包括 Zen HTML 和 Zen CSS 两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式，类似于从CSS选择器到 HTML 代码。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写 HTML 和 CSS 代码的朋友，让你代码飞起来! HYPERLINK / \t _blank Haml Haml 的作者 Hampton Catlin 是这样介绍 Haml 的：Haml 是对传统 XHTML 生成方式的一种反叛，它既不是纯粹的代码，也不是一种文本处理语言，它是与众不同的，是一种在我看来最为自然的 XHTML 构造方式。Haml 是 Rails 下的一种可选模板语言方案，使用 CSS 风格的语法来描述 DIV 的 ID 和 Class，以更加优雅简洁的方式编写 HTML 代码。 这是我从 Haml 网站拿过来的一个示例，你将看到编写 HTML 代码是多么的迅速。 #profile ? ??.left.column ? ????#date=?print_date? ????#address=?current_user.address ? ??.right.column ? ????#email=?current_user.email ? ????#bio=?current_user.bio? Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码： div?id=profile? ??div?class=left?column? ????div?id=date%=?print_date?%/div? ????div?id=address%=?current_user.address?%/div? ??/div? ??div?class=right?column? ????div?id=email%=?current_user.email?%/div? ????div?id=bio%=?current_user.bio?%/div? ??/div? /div? CSS 和 HTML 一样，快速编写 CSS 代码的方法也有很多，这里向大家介绍一项非常酷的东西——CSS 编译器，我个人觉得这是提供 CSS 编码速度最有效的方法。只是，你需要花一点点时间学习新的语法，新语法非常简单，你很快就能学会。 所有的 CSS 编译器都有如下共同点： ◆ 新的语法，通常很容易就能学会 ◆ 允许嵌套规则，定义变量，混合类型，继承 ◆ 生成格式化良好的 CSS 文件 HYPERLINK / \t _blank Sass Sass 让 CSS 代码变得更加有趣，Sass 扩展了 CSS3，增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性，能够生成良好格式化的 CSS 代码，易于组织和维护。它能将类似 CSS 但是书写更简洁的 Sass 语言最终转换为 CSS 代码。Sass 提供了基于 Ruby 语言开发的工具能够很容易的将 Sass 代码转换为 CSS 代码。 下面是演示 Sass 的重要特性——CSS 嵌套的示例代码： table.hl?{ ? ??margin:?2em?0; ? ??td.ln?{ ? ????text-align:?right; ? ??} ? } ? ? ? li?