【譯】利用.LESS來提高CSS

範大腳腳發表於2017-12-14
CSS
簡介
     Cascading Style Sheets,或簡稱為CSS,是用於描述Web頁面外觀的語言。利用CSS，Web開發人員可以將文件的內容（html,文字，或者圖片等等)和頁面的表現相分離.這種分離會讓頁面更加容易閱讀，理解和更新。瀏覽器通過將CSS檔案進行快取使頁面所佔用的寬頻大幅減少。CSS還可以使網站的改版更加容易。能展示CSS無與倫比靈活性的例子是CSS 禪意花園。這個網站只有一個固定HTML的頁面，但是允許全世界的開發人員提交他們自己的CSS頁面來讓網站變得與眾不同。
  
     不幸的是，現有的CSS語法還有待提高，因為CSS中沒有變數一說，許多css檔案包含大量重複的css規則，這使得CSS檔案不僅比應有的要大，還使閱讀更加困難。如果一個網站僅僅是將主色調改了，則所有的CSS修飾符都需要被重複的修改。並且CSS特有的繼承性也會導致問題，比如讓<h1>中的元素具有下劃線，但h1內的元素沒有下劃線，則還需要多定義一個選擇符，比如h1 a.在理想情況下CSS應該支援巢狀定義，讓你可以在H1選擇符內直接定義a.
 
     .LESS是一個免費開源的,從Ruby的LESS library衍生而來。.LESS是一個允許web開發人員使用更加先進的語言特性的語法解析器，這些特性包括變數，操作符，巢狀規則。其實.LESS真正的作用是將使用高階特性的CSS轉換成標準的CSS.這些都是在Web客戶端發起請求時通過Http Handler來完成的。也可以是編輯時就完成的。此外，.less可以配置成自動最小化所生成的CSS檔案，不僅節省了頻寬，並且使終端使用者體驗更上一層。
 
     這篇文章講述如果在你的Asp.net網站中開始使用.LESS。請繼續往下讀。
 
解決CSS的不足：變數
     CSS的一個缺陷是css檔案中經常包含N多重複的CSS規則。比如說，很多網站都在不同的CSS規則中使用相同的顏色資訊，頁面的背景色和頁面頭部背景色或者頁尾背景色或許都使用了相同顏色。下面的CSS程式碼段說明了當應用上面規則時，CSS檔案存在著重複：
#header {
   background-color: #ffe;
}
#footer {
   background-color: #ffe;
}
a:hover {
   background-color: #ffe;
} 
   如果網站需要將主色調改變，則需要改變所有使用#ffe顏色的地方。
   .LESS引入了變數來解決這樣的問題。就像C#和VB帶啊一樣。變數允許通過變數名來引用相應的值，如果你需要改變值，比如說上面的#ffe，你僅僅只是需要改變變數值皆可。下面程式碼是使用這一特性的CSS：
@primary_color: #ffe;
#header {
   background-color: @primary_color;
}
#footer {
   background-color: @primary_color;
}
a:hover {
   background-color: @primary_color;
} 
解決CSS的不足：對變數使用操作符
 
   .LESS甚至可以對變數應用操作符，比如你需要將頁面頭部的邊框顏色比背景顏色略微深一點，你可以這樣使用：
@primary_color: #ffe;
#header {
   background-color: @primary_color;
   border-bottom-color: @primary_color – #222;
}
   當.LESS的分析器遇到上面操作符時，它會將@primary_color的值減去十六進位制的值#222,結果會是顏色#ddc。
解決CSS的不足：混合器
     使用多個CSS class來包含經常使用的css規則的一小部分並不是少見的。.LESS支援混合器，它允許在一個class中定義一部分規則並在其他的class中包含這部分規則。這很像變數，只是這是應用在class上的。看下面的CSS程式碼段，注意body和#submenu有兩個相同的屬性，他們的margin和padding屬性都設定成0.
body {
   font-family: Verdana;
   padding: 0;
   margin: 0;
}
#submenu {
   background-color: #ffe;
   padding: 0;
   margin: 0;
} 
     而使用混合氣，你可以將重複定義的屬性移到一個單獨的class呢（我命名為noMarginNoPadding）然後在body和#submenu直接飲用這個class:
.noMarginNoPadding {    padding: 0;
   margin: 0;
}
body {
   font-family: Verdana;
   .noMarginNoPadding
}
#submenu {
   background-color: #ffe;
   .noMarginNoPadding
} 
   
解決CSS的不足：巢狀規則
  很多情況下，樣式表對於一個大塊內的內容需要定義很多選擇符，比如，一個web設計人員需要為頁面頭部所有h1元素定義規則，或者是為所有ul內的li元素使用特定的class名稱，如果需要實現這些，CSS需要制定很多的選擇符，需要寫一大堆的選擇符並用空格分開。
   .LESS使用一種更加直觀的方式，下面CSS程式碼段是web設計人員常見的任務，為ol內的li元素指定橫向排列。這種樣式需要為ul定義規則，為ul內的li定義規則還需要為li內的a（超連結）之類的元素定義規則,.LESS允許使用巢狀定義來讓CSS更加容易閱讀和理解。並且使其分組。
ul
{
   list-style-type: none;
   height: 30px;
   
   li
   {
      float: left;
      padding-right: 15px;
      
      a
      {
         padding: 5px;
         display: block;
         color: black;
         text-decoration: none;
      }
      
      a:hover
      {
         background-color: @menu_color – #222;
      }
   }
} 
使用.LESS的HTTP Handler解析CSS
     上面.LESS支援的多種特性–變數，操作符，混合器，巢狀規則，並不是標準CSS所能夠識別的。如果你建立一個樣式表並使用變數，然後傳送到客戶端，服務端並不會理解變數，也就不會進行處理。而.LESS的作用是將其支援特性的CSS處理成合法有效的CSS。將.LESS的CSS轉換成標準的CSS是在客戶端向服務端發起請求時進行的。讓我們來看.LESS是如果憑空生成CSS的。
     為了你的站點可以使用.LESS,你需要dotless.Core.dll集合到你的bin目錄下，寫這篇文章時你可以下載到目前最新的.LESS（版本1.0.0.5）,如果想要更新的版本，請去.LESS website.
      下一步，開啟Web.config來註冊.LESS的HTTP Handler.至少要新增如下<httpHandlers>節點到<System.Web>下（如果站點是跑在IIS7integrated pipeline模式下，則還需要新增到<system.webServer><handlers>節點）
<httpHandlers>
   …
   <add type=”dotless.Core.LessCssHttpHandler, dotless.Core” validate=”false” path=”*.LESS” verb=”*” /> </httpHandlers>  
    上面的程式碼告訴ASP.net將所有以.LESS副檔名結尾的檔案都交由LessCssHttpHandler這個HTTP Handler來處理，這個HTTP Handler將CSS解析成標準的CSS並放入一個特定的檔案中，然後返回給請求者。
    這就是所有內容了！不過要記住將你所有的css檔案都改成.LESS作為副檔名。現在你可以享受.LESS所帶來的好處了。
     可以在文章底部找到下載使用.LESS的ASP.net示例站點的連結。如果想檢視生成後的CSS程式碼，請看如下DEMO中的Styles.less的程式碼段：
@base_color: #f63;
.noMarginNoPadding {
   margin: 0;
   padding: 0;
}
body {
   background-color: @base_color;
   .noMarginNoPadding;
} 
   上面程式碼展示了使用變數（@base_color）和混合器(noMarginNoPadding類)，styles.less檔案通過<head>中的 <link>節點進行引用，就像你引用普通的css檔案一樣。當瀏覽器請求檔案時，.LESS HTTP Handler會將上面的CSS程式碼段轉換成下面的程式碼段，並返回到瀏覽器，注意@base_color的值是如何被替換的，以及noMarinNoPadding類是如何應用到body選擇符中：
.noMarginNoPadding {
   margin: 0;
   padding: 0;
}
body {
   background-color: #f63;
   margin: 0;
   padding: 0;
} 
 
快取和壓縮
     你可以通過在web.config中配置.LESS以支援快取和壓縮（詳細請看.LESS homepage或者在本篇文章底部的示例程式碼。）cache選項通過將HTTP Handler生成的標準CSS通過ASP.net中的Cache物件快取在服務端，而壓縮CSS時用過刪除空格以及其他不需要的標籤來減少CSS的大小，比如，前面的CSS程式碼開啟壓縮後如下：
.noMarginNoPadding{margin:0;padding:0;}body{background-color:#f63;margin:0;padding:0;}  
   記住，這裡的快取是將CSS快取到伺服器中。無論是否使用服務端快取，.LESS HTTP Handler會含有將生成的CSS檔案快取在瀏覽器5分鐘的HTTP頭。
 
使用.LESS的編譯器手動生成標準CSS檔案
      連同HTTP Handler一起，.LESS的下載檔案中海包含了.LESS引擎的擴充套件，名為：dotless.Compiler.exe，這個程式用於在命令列下將.LESS CSS生成標準的CSS檔案,帶有壓縮CSS選項，比如，生成開啟壓縮選項後，將Styles.less生成Styles.css可以使用如下命令：
dotless.Compiler.exe -m Styles.less Styles.css 
    使用.LESS編譯器的好處是生成靜態的css檔案，你既不用依靠.Less的客戶端也不用依靠.LESS的服務端快取。此外，你也不需要為此設定Web.config或者是IIS,你只需要處理標準的css檔案即可。當然，劍是雙刃的，你需要手動來生成CSS檔案，然而，如果你有自動生成或者是部署的程式，你僅僅只需要新增幾行命令而已。
 
總結
   CSS是一種理想設定WEB頁面的方式，雖然CSS非常強大，但是它本身固有的缺陷也會使樣式檔案由於重複而過於龐大。.LESS通過引入一些列特性來解決CSS的不足，這些特性包括：變數，操作符，混合器，巢狀規則。這些.LESS的特性既可以通過HTTP Handler來處理，也可以通過命令列來編譯。此外，.LESS還可以通過配置來自動壓縮生成CSS的大小。
 
Happy Programming!
By Scott Mitchell
 
translated by CareySon
本文轉自CareySon部落格園部落格，原文連結http://www.cnblogs.com/CareySon/archive/2010/03/06/1679793.html，如需轉載請自行聯絡原作者


相關文章