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

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

<a href="http://code.google.com/p/zen-coding/" target="_blank"></a>

　　

<a href="http://haml-lang.com/" target="_blank"></a>

#profile

    .left.column

        #date= print_date

        #address= current_user.address

    .right.column

        #email= current_user.email

        #bio= current_user.bio

　Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码：

&lt;div id="profile"&gt;

    &lt;div class="left column"&gt;

        &lt;div id="date"&gt;&lt;%= print_date %&gt;&lt;/div&gt;

        &lt;div id="address"&gt;&lt;%= current_user.address %&gt;&lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="right column"&gt;

        &lt;div id="email"&gt;&lt;%= current_user.email %&gt;&lt;/div&gt;

        &lt;div id="bio"&gt;&lt;%= current_user.bio %&gt;&lt;/div&gt;

&lt;/div&gt;

所有的 CSS 编译器都有如下共同点：

新的语法，通常很容易就能学会

允许嵌套规则，定义变量，混合类型，继承

生成格式化良好的 CSS 文件

<a href="http://sass-lang.com/" target="_blank"></a>

　　下面是演示 Sass 的重要特性——CSS 嵌套的示例代码：

table.hl {

    margin: 2em 0;

    td.ln {

        text-align: right;

    }

}

li {

    font: {

        family: serif;

        weight: bold;

        size: 1.2em;

table.hl td.ln {

    text-align: right;

    font-family: serif;

    font-weight: bold;

    font-size: 1.2em;

<a href="http://lesscss.org/" target="_blank"></a>

<a href="http://sandbox.pocoo.org/clevercss/" target="_blank"></a>

<a href="http://ncannasse.fr/projects/hss" target="_blank"></a>

<a href="http://xcss.antpaw.org/" target="_blank"></a>

 　　

#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

&lt;div id="root"&gt;

        &lt;div id="top"&gt;

                &lt;div id="logo"&gt;

                        &lt;a href="/"&gt;Markup Generator&lt;/a&gt;

                &lt;/div&gt;

                &lt;form id="search" method="post" action="./"&gt;

                        &lt;fieldset&gt;

                                &lt;label for="query"&gt;Enter keyword:&lt;/label&gt;

                                &lt;input id="query" type="text" name="term" /&gt;

                                &lt;button type="submit"&gt;Find&lt;/button&gt;

                        &lt;/fieldset&gt;

                &lt;/form&gt;

        &lt;/div&gt;

        &lt;div id="header"&gt;

                &lt;h1&gt;Markup Generator&lt;/h1&gt;

                &lt;h2&gt;Nifty tool for XHTML/CSS coders&lt;/h2&gt;

        &lt;div id="content"&gt;

                &lt;div id="primary"&gt;

                        &lt;div id="about"&gt;&lt;/div&gt;

                &lt;div id="secondary"&gt;

                        &lt;div id="contact" class="box"&gt;&lt;/div&gt;

                        &lt;div id="notify" class="box"&gt;&lt;/div&gt;

                        &lt;div id="bookmarks" class="box"&gt;&lt;/div&gt;

        &lt;div id="footer"&gt;

                &lt;p&gt;Copyright (c) 2011 jizhula.com&lt;/p&gt;

　同时还能够生成如下的 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 过程中的枯燥与乏味，能够大幅节省编码时间，加快开发进度。

本文转自山边小溪 51CTO博客，原文链接：http://blog.51cto.com/lihongbo/821149，如需转载请自行联系原作者