在这篇文章中，我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。AD：你曾经考虑过想要加快HTML和CSS编码速度吗?不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是CSS网格框架，也不是CSSReset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。HTML加快HTML编码的方法有很多，这里我们要介绍的是HTML缩写技术。取代传统的编写完整HTML标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<divid="container"></div>。实现HTML缩写技术，有两种著名的解决方案——ZenCoding和HAML。HYPERLINK"http://code.google.com/p/zen-coding/"\t"_blank"ZenCodingZenCoding是一个用于快速编写HTML，CSS，XML，XSL或者其他结构化格式语言编码的插件，包括ZenHTML和ZenCSS两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式，类似于从CSS选择器到HTML代码。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、VisualStudio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写HTML和CSS代码的朋友，让你代码飞起来!HYPERLINK"http://haml-lang.com/"\t"_blank"HamlHaml的作者HamptonCatlin是这样介绍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.bioHaml模板引擎能够把上面的代码生成如下的标准HTML代码：<divid="profile"><divclass="leftcolumn"><divid="date"><%=print_date%></div><divid="address"><%=current_user.address%></div></div><divclass="rightcolumn"><divid="email"><%=current_user.email%></div><divid="bio"><%=current_user.bio%></div></div></div>CSS和HTML一样，快速编写CSS代码的方法也有很多，这里向大家介绍一项非常酷的东西——CSS编译器，我个人觉得这是提供CSS编码速度最有效的方法。只是，你需要花一点点时间学习新的语法，新语法非常简单，你很快就能学会。所有的CSS编译器都有如下共同点：◆新的语法，通常很容易就能学会◆允许嵌套规则，定义变量，混合类型，继承◆生成格式化良好的CSS文件HYPERLINK"http://sass-lang.com/"\t"_blank"SassSass让CSS代码变得更加有趣，Sass扩展了CSS3，增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性，能够生成良好格式化的CSS代码，易于组织和维护。它能将类似CSS但是书写更简洁的Sass语言最终转换为CSS代码。Sass提供了基于Ruby语言开发的工具能够很容易的将Sass代码转换为CSS代码。下面是演示Sass的重要特性——CSS嵌套的示例代码：table.hl{margin:2em0;td.ln{text-align:right;}}li{font:{family:serif;weight:bold;size:1.2em;}}借助Sass工具能够生成如下的标准CSS代码：table.hl{margin:2em0;}