#profile 
  
  
  
  .left.column 
  
  
  
    #date= print_date
  
  
  
    #address= current_user.address 
  
  
  
  .right.column 
  
  
  
    #email= current_user.email 
  
  
  
    #bio= current_user.bio
 
 
 

 
 
 

  
  
  

  
  
  
  
  
  
  
    <%= print_date %>

CSS

和 HTML 一樣，快速編寫(xiě) CSS 代碼的方法也有很多，這里向大家介紹一項(xiàng)非?？岬臇|西——CSS 編譯器，我個(gè)人覺(jué)得這是提供 CSS 編碼速度最有效的方法。只是，你需要花一點(diǎn)點(diǎn)時(shí)間學(xué)習(xí)新的語(yǔ)法，新語(yǔ)法非常簡(jiǎn)單，你很快就能學(xué)會(huì)。

所有的 CSS 編譯器都有如下共同點(diǎn)：

◆ 新的語(yǔ)法，通常很容易就能學(xué)會(huì)

◆ 允許嵌套規(guī)則，定義變量，混合類(lèi)型，繼承

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

Sass

Sass 讓 CSS 代碼變得更加有趣，Sass 擴(kuò)展了 CSS3，增加了規(guī)則嵌套、變量定義、混合類(lèi)型、選擇器、繼承等等特性，能夠生成良好格式化的 CSS 代碼，易于組織和維護(hù)。它能將類(lèi)似 CSS 但是書(shū)寫(xiě)更簡(jiǎn)潔的 Sass 語(yǔ)言最終轉(zhuǎn)換為 CSS 代碼。Sass 提供了基于 Ruby 語(yǔ)言開(kāi)發(fā)的工具能夠很容易的將 Sass 代碼轉(zhuǎn)換為 CSS 代碼。

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

 
 
 

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

借助 Sass 工具能夠生成如下的標(biāo)準(zhǔn) 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（http://lesscss.org/）

Less 最早是一個(gè) Ruby 的 gem，讓 CSS 具有動(dòng)態(tài)語(yǔ)言的特性，這些特性包括變量，操作符，嵌套規(guī)則。其實(shí) Less 真正的作用是將使用高級(jí)特性的 CSS 轉(zhuǎn)換成標(biāo)準(zhǔn)的 CSS。這些都是在 Web 客戶(hù)端發(fā)起請(qǐng)求時(shí)通過(guò) Http Handler 來(lái)完成的。也可以是編輯時(shí)就完成的。此外，Less 可以配置成自動(dòng)最小化所生成的 CSS 文件，不僅節(jié)省了帶寬，并且使最終用戶(hù)體驗(yàn)更上一層。另外有 .Net 版本的 Less，做 .Net 開(kāi)發(fā)的朋友可以關(guān)注一下。

CleverCSS

CleverCSS 是受 Python 啟發(fā)而為 CSS 開(kāi)發(fā)的一個(gè)小型標(biāo)記語(yǔ)言，用于生成干凈的結(jié)構(gòu)化的樣式表。它比 CSS2 更加強(qiáng)大和干凈，和 CSS 最大的區(qū)別是語(yǔ)法：CleverCSS 基于縮進(jìn)而不單調(diào)，而這是和 Python 規(guī)則相悖的，但也不失為組織樣式表的一個(gè)好方法。

HSS

HSS 是一個(gè)用于擴(kuò)展 CSS 語(yǔ)法的一個(gè)工具，具有變量和嵌套等眾多強(qiáng)大特性。

xCSS

xCSS 基于標(biāo)準(zhǔn)的 CSS，同時(shí)賦予了在編寫(xiě)復(fù)雜的樣式表的時(shí)候的強(qiáng)大的面向?qū)ο蠊ぷ髁鞒?，使?xCSS 能夠大幅減少你的開(kāi)發(fā)時(shí)間。xCSS 提供了整體的 CSS 結(jié)構(gòu)的直觀概述，使用變量以及通過(guò)重用現(xiàn)有的樣式和其它很多方便的功能來(lái)加速 CSS 代碼編寫(xiě)。xCSS 是一個(gè)輕量級(jí)的工具，而且能夠讓你的代碼保持語(yǔ)義。

最后但不是最不重要

最后向大家推薦一款非常棒的在線小工具——Markup Generator，它能夠幫助你快速的生成 HTML 代碼并能夠根據(jù)從代碼中提取所有的選擇器，然后自動(dòng)生成 CSS 框架代碼。例如編寫(xiě)如下簡(jiǎn)寫(xiě)代碼：

 
 
 

  
  
  
#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 能夠生成如下標(biāo)準(zhǔn)的 HTML 代碼：

 
 
 

  
  
  

  
  
  
    
  
  
  
        
  
  
  
            Markup Generator