软件开发培训班 >> 编程开发 >> CSS


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

　　本文标签：CSS

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

　　HTML

　　加快HTML 编码的方法有很多，这里我们要介绍的是 HTML 缩写技术  。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成

  。实现 HTML 缩写技术，有两种著名的解决方案——Zen Coding 和 HAML  。

　　Zen Coding

　　Zen Coding 是一个用于快速编写 HTML，CSS，XML，XSL 或者其他结构化格式语言编码的插件，包括 Zen HTML 和 Zen CSS 两部分  。这个插件核心是一个强大的缩写引擎，允许你扩展表达式，类似于从CSS选择器到 HTML 代码  。支持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 代码是多么的迅速  。

  1. #profile  
  2.   .left.column  
  3.     #date= print_date 
  4.     #address= current_user.address  
  5.   .right.column  
  6.     #email= current_user.email  
  7.     #bio= current_user.bio 

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

  1. <div id="profile"> 
  2.   <div class="left column"> 
  3.     <div id="date"><%= print_date %>div> 
  4.     <div id="address"><%= current_user.address %>div> 
  5.   div> 
  6.   <div class="right column"> 
  7.     <div id="email"><%= current_user.email %>div> 
  8.     <div id="bio"><%= current_user.bio %>div> 
  9.   div> 
  10. div> 

　　CSS

　　和 HTML 一样，快速编写 CSS 代码的方法也有很多，这里向大家介绍一项非常酷的东西——CSS 编译器，我个人觉得这是提供 CSS 编码速度最有效的方法  。只是，你需要花一点点时间学习新的语法，新语法非常简单，你很快就能学会  。

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

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

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

　　◆ 生成格式化良好的 CSS 文件

　　Sass

　　Sass 让 CSS 代码变得更加有趣，Sass 扩展了 CSS3，增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性，能够生成良好格式化的 CSS 代码，易于组织和维护  。它能将类似 CSS 但是书写更简洁的 Sass 语言最终转换为 CSS 代码  。Sass 提供了基于 Ruby 语言开发的工具能够很容易的将 Sass 代码转换为 CSS 代码  。

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

  1. table.hl {  
  2.   margin: 2em 0;  
  3.   td.ln {  
  4.     text-align: right;  
  5.   }  
  6. }  
  7.    
  8. li {  
  9.   font: {  
  10.     family: serif;  
  11.     weight: bold;  
  12.     size: 1.2em;  
  13.   }  
  14. } 

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

  1. table.hl {  
  2.   margin: 2em 0;  
  3. }  
  4. table.hl td.ln {  
  5.   text-align: right;  
  6. }  
  7.    
  8. li {  
  9.   font-family: serif;  
  10.   font-weight: bold;  
  11.   font-size: 1.2em;  
  12. } 

　　Less（http://lesscss.org/）

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

　　CleverCSS

　　

CleverCSS

　　

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

　　HSS

　　

　　

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

　　xCSS

　　

xCSS

　　

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

　　最后但不是最不重要

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

  1. #root  
  2.  #top  
  3.   #logo  
  4.    a[href="/"]=Markup Generator  
  5.   form#search  
  6.    fieldset  
  7.     label[for="query"]=Enter keyword:  
  8.     input[type="text" name="term"]#query  
  9.     button[type="submit"]=Find  
  10.  #header  
  11.   h1=Markup Generator  
  12.   h2=Nifty tool for XHTML/CSS coders  
  13.  #content  
  14.   #primary  
  15.    #about  
  16.   #secondary  
  17.    #contact.box  
  18.    #notify.box  
  19.    #bookmarks.box  
  20.  #footer  
  21.   p=Copyright (c) 2011 jizhula.com 

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

  1. <div id="root"> 
  2.     <div id="top"> 
  3.         <div id="logo"> 
  4.             <a href="/">Markup Generatora> 
  5.         div> 
  6.         <form id="search" method="post" action="./"> 
  7.             <fieldset> 
  8.                 <label for="query">Enter keyword:label> 
  9.                 <input id="query" type="text" name="term" /> 
  10.                 <button type="submit">Findbutton> 
  11.             fieldset> 
  12.         form> 
  13.     div> 
  14.     <div id="header"> 
  15.         <h1>Markup Generatorh1> 
  16.         <h2>Nifty tool for XHTML/CSS codersh2> 
  17.     div> 
  18.     <div id="content"> 
  19.         <div id="primary"> 
  20.             <div id="about">div> 
  21.         div> 
  22.         <div id="secondary"> 
  23.             <div id="contact" class="box">div> 
  24.             <div id="notify" class="box">div> 
  25.             <div id="bookmarks" class="box">div> 
  26.         div> 
  27.     div> 
  28.     <div id="footer"> 
  29.         <p>Copyright (c) 2011 jizhula.comp> 
  30.     div> 
  31. div> 

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

  1. #root {  }  
  2.  #top {  }  
  3.   #logo {  }  
  4.    #logo a {  }  
  5.   #search {  }  
  6.    #search fieldset {  }  
  7.     #search fieldset label {  }  
  8.     #query {  }  
  9.     #search fieldset button {  }  
  10.  #header {  }  
  11.   #header h1 {  }  
  12.   #header h2 {  }  
  13.  #content {  }  
  14.   #primary {  }  
  15.    #about {  }  
  16.   #secondary {  }  
  17.    #contact {  }  
  18.    #notify {  }  
  19.    #bookmarks {  }  
  20.  #footer {  }  
  21.   #footer p {  } 

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

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

　　原文：http://www.cnblogs.com/lhb25/archive/2011/12/01/tools-to-speed-up-your-css-and-html-coding.html