讓代碼飛一會兒：快速編寫 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，如需轉載請自行聯系原作者