让代码飞一会儿：快速编写 HTML 和 CSS 的工具和技术

前言

　　你曾经考虑过想要加快 HTML 和 CSS 编码速度吗？不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是 CSS 网格框架，也不是 CSS Reset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。

HTML

　　加快 HTML 编码的方法有很多，这里我们要介绍的是 HTML 缩写技术。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<div id="container"></div>。实现 HTML 缩写技术，有两种著名的解决方案——Zen Coding 和 HAML。

Zen Coding

　　

　　Zen Coding 是一个用于快速编写 HTML，CSS，XML，XSL 或者其他结构化格式语言编码的插件，包括 Zen HTML 和 Zen CSS 两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写 HTML 和 CSS 代码的朋友，让你代码飞起来！

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 文件

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 {
    font: {
        family: serif;
        weight: bold;
        size: 1.2em;
    }
}

　　借助 Sass 工具能够生成如下的标准 CSS 代码：

table.hl {
    margin: 2em 0;
}
table.hl td.ln {
    text-align: right;
}
    
li {
    font-family: serif;
    font-weight: bold;
    font-size: 1.2em;
}

Less

 

　　Less 最早是一个 Ruby 的 gem，让 CSS 具有动态语言的特性，这些特性包括变量，操作符，嵌套规则。其实 Less 真正的作用是将使用高级特性的 CSS 转换成标准的 CSS。这些都是在 Web 客户端发起请求时通过 Http Handler 来完成的。也可以是编辑时就完成的。此外，Less 可以配置成自动最小化所生成的 CSS 文件，不仅节省了带宽，并且使最终用户体验更上一层。另外有 .Net 版本的 Less，做 .Net 开发的朋友可以关注一下。

CleverCSS

　　

　　 CleverCSS 是受 Python 启发而为 CSS 开发的一个小型标记语言，用于生成干净的结构化的样式表。它比 CSS2 更加强大和干净，和 CSS 最大的区别是语法：CleverCSS 基于缩进而不单调，而这是和 Python 规则相悖的，但也不失为组织样式表的一个好方法。

HSS

　　

　　HSS 是一个用于扩展 CSS 语法的一个工具，具有变量和嵌套等众多强大特性。

xCSS

 　　

　　xCSS 基于标准的 CSS，同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程，使用 xCSS 能够大幅减少你的开发时间。xCSS 提供了整体的 CSS 结构的直观概述，使用变量以及通过重用现有的样式和其它很多方便的功能来加速 CSS 代码编写。xCSS 是一个轻量级的工具，而且能够让你的代码保持语义。

最后但不是最不重要

　　最后向大家推荐一款非常棒的在线小工具——Markup Generator，它能够帮助你快速的生成 HTML 代码并能够根据从代码中提取所有的选择器，然后自动生成 CSS 框架代码。例如编写如下简写代码：

#root
#top
    #logo
     a[href="/"]=Markup Generator
    form#search
     fieldset
        label[for="query"]=Enter keyword:
        input[type="text" name="term"]#query
        button[type="submit"]=Find
#header
    h1=Markup Generator
    h2=Nifty tool for XHTML/CSS coders
#content
    #primary
     #about
    #secondary
     #contact.box
     #notify.box
     #bookmarks.box
#footer
    p=Copyright (c) 2011 jizhula.com

使用 Markup Generator 能够生成如下标准的 HTML 代码：

<div id="root">
        <div id="top">
                <div id="logo">
                        <a href="/">Markup Generator</a>
                </div>
                <form id="search" method="post" action="./">
                        <fieldset>
                                <label for="query">Enter keyword:</label>
                                <input id="query" type="text" name="term" />
                                <button type="submit">Find</button>
                        </fieldset>
                </form>
        </div>
        <div id="header">
                <h1>Markup Generator</h1>
                <h2>Nifty tool for XHTML/CSS coders</h2>
        </div>
        <div id="content">
                <div id="primary">
                        <div id="about"></div>
                </div>
                <div id="secondary">
                        <div id="contact" class="box"></div>
                        <div id="notify" class="box"></div>
                        <div id="bookmarks" class="box"></div>
                </div>
        </div>
        <div id="footer">
                <p>Copyright (c) 2011 jizhula.com</p>
        </div>
</div>

　同时还能够生成如下的 CSS 框架代码：

#root {    }
#top {    }
    #logo {    }
     #logo a {    }
    #search {    }
     #search fieldset {    }
        #search fieldset label {    }
        #query {    }
        #search fieldset button {    }
#header {    }
    #header h1 {    }
    #header h2 {    }
#content {    }
    #primary {    }
     #about {    }
    #secondary {    }
     #contact {    }
     #notify {    }
     #bookmarks {    }
#footer {    }
    #footer p {    

　非常好的一款工具，大家可以在线试用一下。

　　以上就是全部内容了，这些实用的工具和技术能够帮助Web开发人员摆脱编写 HTML 和 CSS 过程中的枯燥与乏味，能够大幅节省编码时间，加快开发进度。