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

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

前言

　　你曾经考虑过想要加快 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 过程中的枯燥与乏味，能够大幅节省编码时间，加快开发进度。

欢迎任何形式的转载，但请务必注明出处。