文章出處

掌握CSS是每個Web開發者的基本要求，雖然CSS本身并不復雜，但怎樣寫出支持所有主流瀏覽器（特別是IE）的CSS，以及在大型網站中如何有序地組織好CSS結構卻是一個相當棘手的問題。我更多的是一個開發者，而不是一個設計師，卻不幸花了大量時間處理CSS這些棘手問題，如果能有一些工具能幫我處理這些問題，那將很有意義。經過一段時間的搜索和研究，還真發現了幾個很棒的工具，感覺真是相見恨晚，與大家分享之。

 

Blueprint CSS Framework

 

剛才說過了，處理瀏覽噐的不一致性是很困難的事情。每開始一個新項目，我們都需要做一些重復的事情，比如需要將一些元素的padding和margin重置為0，設置某些元素的默認樣式，定義一些通用的樣式等，這些由于瀏覽器之間的不一致而變得復雜。有了blueprint ，你就不用再擔心這些啦，blueprint已經非常完美的為你做好這些事情了。這還只是blueprint做的一小部分事情，它還定義了一些form的樣式，另外它帶一些插件。blueprint還是一個基于網格(grid)布局的框架。在我看到blueprint之前還不知道網格布局已經這么流行了。網格布局就是把瀏覽器內容區域劃分一些固定的大小的網格，網頁中元素的定位都向網格靠齊。blueprint默認設置網頁的寬度為950像素，并它分成24個網格，每個網格寬度為30像素，每個網格之間的距離為10像素。

 

 

在blueprint下布局非常容易，我們來看如何使用blueprint來做非常常見的三列布局：

 

Html代碼  收藏代碼
  1. <html>  
  2. <head>  
  3.     <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">  
  4.     <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
  5.     <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->  
  6. </head>  
  7. <body>  
  8. <div class="container">  
  9.     <div class="span-24 last">  
  10.         Header  
  11.     </div>  
  12.     <div class="span-4">  
  13.         Left sidebar  
  14.     </div>  
  15.     <div class="span-16">  
  16.         Main content  
  17.     </div>  
  18.     <div class="span-4 last">  
  19.         Right sidebar  
  20.     </div>      
  21.     <div class="span-24 last">  
  22.         Footer  
  23.     </div>  
  24. </div>      
  25. </body>  
  26. </html>  

 

span-x表示內容跨x個網格，同時右邊留有10像素的margin，例如span-4的寬度為4*40-10=150像素。注意當內容跨了第24個風格，需要定義last樣式，last樣式的作用就是設置right-margin為0。這樣上面的例子就很清楚了，header和footer跨所有24個網格，左右側欄各跨4個網格，中間內容跨16個網格。這里 是個更酷的例子，它完全使用blueprint內置樣式。

 

blueprint使得布局變得很容易，但是它也有問題，那就是它大量使用基于表現的class名稱（如span-x)，這完全違背cass名稱應該基于語義的規則。我們暫且擱置這個問題，來看另外一個非常非常強大的工具。

 

 

Sass

 

Sass 是一個輸出CSS的編程語言，沒錯，CSS也有編程語言。Sass基于Ruby語言，并且是Haml的一部分，所以要安裝Sass就得安裝Haml，當然還得安裝Ruby。我不喜歡Haml，卻非常喜歡Sass。通過下面的命令來安裝Haml(同時也安裝了Sass)，基于你使用的操作系統，你可能需要在命令加上sudo:

 

Ruby代碼  收藏代碼
  1. gem install haml  

 

Sass是基于縮進的語言，來看一個例子：

 

Sass代碼  收藏代碼
  1. table.hl  
  2.   margin: 2em 0  
  3.   td.ln  
  4.     text-align: right  
  5.   
  6. li  
  7.   font:  
  8.     family: serif  
  9.     weight: bold  
  10.     size: 1.2em  

 

假設上面的內容保存在style.sass文件，運行命令：

 

Command代碼  收藏代碼
  1. sass style.sass style.css  

 

 會輸出style.css文件，它的內容為：

 

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. }  

 

可以看出Sass語法的優勢，由于基于縮進，共同的前綴只需要寫一次，而在CSS文件則需要重復多次，這對維護是個問題。當然，Sass可以做得更多，它還支持變量和Mixin。Mixin是可重用的樣式，它甚至還可以帶參數。Mixin的定義以”=“開頭，變量定義以"!"開頭。

 

Java代碼  收藏代碼
  1. =table-scaffolding  
  2.   th  
  3.     text-align: center  
  4.     font-weight: bold  
  5.   td, th  
  6.     padding: 2px  
  7.   
  8. =left(!dist)  
  9.   float: left  
  10.   margin-left = !dist  
  11.   
  12. #data  
  13.   +left(10px)  
  14.   +table-scaffolding  

 

上面的代碼定義了兩個Mixin，分別是table-scaffoding和left，其中left還接收一個dist參數。#data樣式則包含了left Mixin和table-scaffolding Mixin定義的樣式。它會輸出如下CSS：

 

Java代碼  收藏代碼
  1. #data {  
  2.   float: left;  
  3.   margin-left: 10px;  
  4. }  
  5. #data th {  
  6.   text-align: center;  
  7.   font-weight: bold;  
  8. }  
  9. #data td, #data th {  
  10.   padding: 2px;  
  11. }  

 

Mixin是Sass非常強大的一個特性，想想看你是不是在項目中看到很多重復的CSS定義，你不得不來回的拷貝復制。通過Sass你可以將這些公用的Sass定義成一個Mixin，然后在其它實際定義樣式的地方包含它。你甚至還可以定義項目之間都通用的Mixin，把它們包含在一個單獨的文件里，就像類庫一樣，需要時就引用。我們可以為Blueprint的樣式轉變成Sass的格式，并把它們做成Mixin，然后再定義基于語義的樣式，它們包含這些Mixin，這樣我們就可以在頁面中使用語義樣式名稱了，而不需要使用Blueprint帶的基于表現的樣式。幸運的是，我們并不需要自己做這些事情，已經有另外的框架幫你做好了，那就我接下來要談的Compass。Sass支持變量的運算，這有時非常方便，我們可以定義一些元素的寬度，定義為變量，其它元素的寬度由它們計算出來，當改變布局時，只需要修改幾個變量的值就可以了。作為一門編程語言，Sass還支持控制條件和循環語句，雖然這在一般情況下很少用到。

 

 

Compass

 

Blueprint提供了一個非常健壯的CSS框架，但是卻大量使用基于表現的class名稱；Sass語言提供將基于表現的class名稱轉化成基于語義的class名稱的基礎設施，但本身不帶任何樣式；Compass 的作用就是將兩者集成到一塊，結合兩者的優點。Compass還支持其它CSS框架的集成，這里就不說了。Compass也是基于Ruby語言的，使用下列命令來安裝：

 

Command代碼  收藏代碼
  1. gem install compass  

 

要開始一個新的Compass項目，使用：

 

Command代碼  收藏代碼
  1. compass -f blueprint project-name  

 

選項-f表示和blueprint框架集成。進入到項目目錄下，讓我們基于Compass來實現一個三列布局。先寫HTML文件：

 

Html代碼  收藏代碼
  1. <html>  
  2. <head>  
  3.   <!-- Framework CSS -->  
  4.   <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">  
  5.   <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css">  
  6.   <!--[if lt IE 8]>  
  7.     <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css">  
  8.   <![endif]-->  
  9. </head>  
  10. <body>  
  11. <div id="container">  
  12.     <div id="header">  
  13.         Header  
  14.     </div>  
  15.     <div id="left-sidebar">  
  16.         Left sidebar  
  17.     </div>  
  18.     <div id="main-content">  
  19.         Main content  
  20.     </div>  
  21.     <div id="right-sidebar">  
  22.         Right sidebar  
  23.     </div>      
  24.     <div id="footer">  
  25.         Footer  
  26.     </div>  
  27. </div>      
  28. </body>  
  29. </html>  

 

注意上面沒有任何blueprint相關的樣式名，我們為每個部分定義了一個基于語義的id，接下來就是它們定義樣式，打開項目目錄下src/screen.sass文件，將它的內容改成如下：

 

Sass代碼  收藏代碼
  1. // This import applies a global reset to any page that imports this stylesheet.  
  2. @import blueprint/reset.sass  
  3. // To configure blueprint, edit the partials/base.sass file.  
  4. @import partials/base.sass  
  5. @import blueprint  
  6. @import blueprint/modules/scaffolding.sass  
  7.   
  8. +blueprint-typography("body")  
  9. +blueprint-scaffolding("body")  
  10.   
  11. +blueprint-utilities  
  12. +blueprint-debug  
  13. +blueprint-interaction  
  14.   
  15. #container  
  16.     +container  
  17.   
  18. #header, #footer  
  19.     // true表示是最后一列  
  20.     +column(!blueprint_grid_columns, true)  
  21.   
  22. // sidebar占整個頁面的1/4，也就是跨6列  
  23. !sidebar_columns = floor(!blueprint_grid_columns / 4)  
  24. #left-sidebar  
  25.     +column(!sidebar_columns)  
  26. #main-content  
  27.     +column(!blueprint_grid_columns - 2 * !sidebar_columns)  
  28. #right-sidebar  
  29.     +column(!sidebar_columns, true)  

 

前幾行導入Compass提供和Blue相關的Sass樣式，里面包含了很多Mixin，可以拿來用。#header, #footer的樣式直接包含了column Mixin，第一個參數是compass定義的bluepring_grid_columns變量，默認為24，第二個參數為true，表示元素會跨最后一列。left-sidebar和right-sidebar占據整個頁面寬度的1/4，變量sidebar_columns表示sidebar占據的列寬，它根據bluepring_grid_columns計算得到。同樣main-content的寬度也是計算得到的。它們都直接包含了column Mixin。將它轉化成css，在工程目錄下直接使用命令：

 

Java代碼  收藏代碼
  1. compass  

 

就可將src目錄下的sass文件轉化成相應的css。現在打開剛才創建的HTML文件，應該可以看到正常布局的頁面了。

 

在項目開發中，如果每次都需要手工調用compass命令去將sass文件轉換成css文件，那就太麻煩了，compass提供命令

 

Command代碼  收藏代碼
  1. compass -w  

 

它會自動監視src目錄下sass文件的改動并自動將它轉換成css文件。


不含病毒。www.avast.com
arrow
arrow
    全站熱搜

    AutoPoster 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄