強悍的CSS工具組合：Blueprint, Sass, Compass

時間  2019-11-29
標籤 強悍 css 工具 組合 blueprint sass compass 欄目 CSS 简体版
原文   原文鏈接

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

 

Blueprint CSS Frameworkhtml

 

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

 

 

在blueprint下佈局很是容易，咱們來看如何使用blueprint來作很是常見的三列布局：github

 

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名稱應該基於語義的規則。咱們暫且擱置這個問題，來看另一個很是很是強大的工具。瀏覽器

 

 

Sasssass

 

Sass 是一個輸出CSS的編程語言，沒錯，CSS也有編程語言。Sass基於Ruby語言，而且是Haml的一部分，因此要安裝Sass就得安裝Haml，固然還得安裝Ruby。我不喜歡Haml，卻很是喜歡Sass。經過下面的命令來安裝Haml(同時也安裝了Sass)，基於你使用的操做系統，你可能須要在命令加上sudo:app

 

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文件。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程