CSS 編程：LESS 助您事半功倍

　　在本文中我將介紹使用 LESS Framework 動態生成 CSS 內容的 Web 開發

　　毫無疑問CSS 代表一大飛躍它有望將內容與網頁顯示完全分離而且在很大程度上實現了這一點盡管 CSS 屬於（或應該屬於?）設計人員關注的范疇它率先提出了關注點分離原則幾乎每個開發人員都對此非常敏感因此CSS 很快獲得采用它在 Web 開發過程中如此根深蒂固以致於有時難於滿足最新網站的需求

　　問題並不是 CSS 不足以滿足樣式最新圖形豐富並且外觀吸引人的網站需求而是純粹的聲明語言並非始終適合表現復雜的互聯樣式聲明好在只要編寫正確CSS 對於浏覽器仍然合理但對人來說也是如此嗎？

　　Web 開發中一個相對較新的方向是圍繞 CSS 構建基礎結構使開發人員和設計人員能夠以可持續性更高的方式生成相同的 CSS最終的浏覽器樣式表並無變化但其生成方式應有所不同更易讀也更容易管理

　　這一 Web 開發領域出現於幾年前現在日漸成熟有幾個可用的框架可以幫助您進行動態 CSS 內容生成我將提供其中一個框架也就是 LESS Framework 的執行概要並演示它如何與 ASPNET MVC 解決方案集成

為何采用 LESS？

　　開發人員借助 LESS 解決的最大問題之一是信息的重復作為軟件開發人員您可能了解切勿重復(DRY) 原則並且每天都在應用DRY 的主要優點在於它減少了相同信息的存儲位置因而減少了應更新該信息的位置的數量

　　對於普通 CSS您根本不會遇到 DRY 問題例如在某些其他情況下如果多個類中使用某種顏色而您需要對其進行更改可能除了逐一更新之外沒有更好的辦法了使用 CSS 類可以定義特定元素的外觀並針對樣式相關的元素以相同的方式跨頁面重復使用盡管 CSS 類確實可以減少重復但有時在其他方面顯得不足

　　CSS 類的一個問題是它們在語義 HTML 元素的級別運行在構建各種 CSS 類時經常需要重復顏色或寬度等細節信息對這些可重復細節中的每一個使用同一個類並不方便即使設法用一個 CSS 類表示幾乎所有可重復樣式如顏色和寬度當開始對語義元素（如容器）應用樣式時還是應該連用多個 CSS 類以便實現所需的效果

　　如果您曾用 Bootstrap 等框架設計過網頁就會明白我的意思例如

　　<a class=btn btnprimary />

　　首先將錨點設置為一個按鈕（類 btn）然後設置為特定風格的按鈕（類 btnprimary）這種方法有效但可能需要進行大量工作提前計劃所需的類這會增加 Web 項目的工作量而項目往往時間緊迫

　　LESS 這樣的動態樣式表語言表示一種橫向思維您不必花時間嘗試使普通 CSS 變得更加智能只需使用不同的工具（一般是語言）進行生成即可因此LESS 是一種框架它向 CSS 編碼添加了編程人員友好的概念如變量塊和函數

　　與動態 CSS 生成嚴格相關的是將其處理為普通 CSS 供浏覽器使用的問題客戶端可以通過臨時 JavaScript 代碼處理 LESS 代碼也可以在服務器上對其進行預處理使浏覽器只接收最終的 CSS

在 ASPNET MVC 中設置 LESS

　　我將演示從 ASPNET MVC 應用程序中使用 LESS 所需的操作首先我將重點介紹 LESS 代碼的客戶端處理在布局文件的 HEAD 部分添加以下內容

　　<link rel=stylesheet/less type=text/css href=@UrlContent(~/content/less/mysiteless) /> <script type=text/javascript src=@UrlContent(~/content/scripts/lessminjs)></script>

　　這裡假設您已在項目中創建了 Content/Less 文件夾以包含所有 LESS 文件您需要一個 JavaScript 文件以便在浏覽器中進行實際的 LESS 到 CSS 處理您可以從 獲取該腳本文件我將回顧一些可證明 LESS 有用的場景

　　

運行中的 LESS變量

　　觀察 CSS 漸變是了解 LESS 變量作用的好方法多年以來設計人員使用小的 GIF 文件繪制 HTML 容器的漸變背景最近浏覽器增加了 CSS 漸變支持這也是官方 CSS 標准的一部分通過線性漸變語法及其變體實現很遺憾如果要確保盡量多的浏覽器采用這種漸變必須借助一些東西如圖 中的代碼

　　圖 中的代碼幾乎不可讀更糟的是在需要漸變的任何地方都必須重復使用這些代碼此外如果要稍微更改一下漸變顏色（或只更改飽和度或淡化效果）唯一的辦法是在所有位置進行手動編輯直截了當地說這非常困難但是這是對於普通 CSS 唯一可行的方法

　　圖 在多種浏覽器中顯示漸變的綜合代碼

　　

　　/* Old browsers fallback */ backgroundcolor: #ff; background: url(images/red_gradientpng); backgroundrepeat: repeatx; /* Browser specific syntax */ background: mozlineargradient( left #fceabb % #fccdd % #fb % #fbdf %); background: Webkitlineargradient( left #fceabb % #fccdd %#fb %#fbdf %); background: olineargradient( left #fceabb % #fccdd %#fb %#fbdf %); background: mslineargradient( left #fceabb % #fccdd %#fb %#fbdf %); /* Standard syntax */ background: lineargradient( to right #fceabb % #fccdd %#fb %#fbdf %);

　　為找到更好的解決方案您需要跳出 CSS試試 LESS 在 LESS 中您只需定義一次漸變 CSS然後在適當的位置按名稱引用即可 例如

　　backgroundgradientorange { background: #fceabb;
             }
  &ntainer { backgroundgradientorange; }
           

　　名為 backgroundgradientorange 的類按名稱在適當的位置嵌入到類容器和任意其他類中 而漸變定義保存在一個位置

　　從開發人員的角度來看這並不是什麼革命性的改變 不過它使用了變量功能這是 CSS 中沒有的 事實上如果將文件保存為普通樣式表並引用的話前面的語法並不可行 需要一些代碼將擴展語法轉換為普通 CSS 這正是 LESS JavaScript 分析器的功能它將變量擴展為其實際 CSS 內容

　　變量還適用於顏色或大小等標量值 請考慮以下 LESS 代碼

　　@black: #;
   #main {  color: @black; }
   header { backgroundcolor: @black; }
           

　　分析器將 @black 變量擴展為分配的值並進行全文件替換 最終效果是在一處更改實際顏色整個文件中的相應內容會自動更改
運行中的 LESSImports

　　如果需要您可以將 LESS 代碼拆分到多個文件引用文件和包含的類中 例如假設您創建一個 gradientsless 文件內容如下

　　backgroundgradientorange { background: #fceabb;
             }
           

　　在另一個 LESS 文件中如 mainless您可以通過導入該文件引用任何漸變

　　@import "gradients";
  &ntainer { backgroundgradientorange; }
           

　　如果 gradientsless（擴展名不是嚴格必需的）位於其他文件夾中則應在調用中指示路徑信息以便導入
LESS Mixin

　　我調用該 LESS 項目進行變量漸變 嚴格來說這並不完全正確 在 LESS 中一個變量包含一個單一值 一個 CSS 類容器被稱為一個 mixin 這類似於函數但不包含任何自定義邏輯 就像函數一樣LESS 可以接受和處理參數 請看看圖 中演示 mixin 的代碼

　　在圖 中一個名為 shadow 的 mixin 定義了框陰影樣式並將顏色作為外部參數公開 與之類似textbox mixin 定義輸入字段的基本外觀 它導入陰影定義並保持寬度為參數化形式 通過這種方式為不同大小（mininormal 和 large）的輸入字段定義三個類就非常簡單了 更重要的是它只需進行少量編輯工作更新也非常簡單（請參閱圖 ）

　　圖 LESS Framework 中的 Mixin

　　/*  Mixins  */
   shadow(@color) {
     boxshadow: px px px @color;
   }
   textbox(@width) {
     shadow(#);
     border: solid px #;
     backgroundcolor: #dddd;
     padding: px;
     width: @width;
   }
   /*  CSS classes  */
   textboxmini {
     textbox(px);
   }
   textboxnormal {
     textbox(px);
   }
   textboxlarge {
     textbox(px);
   }

　　
圖 運行中的 LESS Mixin

　　Mixin 可以接受多個參數或可變數量的參數此外每個參數都支持默認值

　　mixin(@color: #ff) {
             }
           

　　LESS 並不是富編程語言表示它的設計缺少命令來指示條件或循環 但 mixin 的行為仍然可以根據所傳遞的值發生變化 假設您要對一個較大的按鈕使用較粗的邊框和字體 您定義一個名為 button 的參數化 mixin使用關鍵字when將設置與條件綁定 條件必須基於一個參數

　　button (@size) when (@size < px) {
    padding: px;
    fontsize: em;
    width: @size *;
   }
   button (@size) when (@size >= px) {
     padding: px;
     fontsize: em;
     fontweight: ;
     backgroundcolor: red;
     width: @size *;
   }
           

　　您應用不同的設置但也可以使用基本操作通過一個系數將大小擴大為數倍 然後在實際 CSS 類中使用 mixin

　　pushbuttonlarge {
     button(px);
   }
   pushbuttonsmall {
     button(px);
   }
           

　　運行此代碼的結果如圖 所示

　　
圖 在 CSS 類中使用 LESS Mixin 的效果

　　LESS 附帶很多可操作顏色的預定義函數您可以使用函數按百分比調整顏色亮度和飽和度也可以按百分比設置顏色淡入和淡出如下所示

　　pushbutton {
     backgroundcolor: fade(red %);
   }
           

　　有關 LESS 支持的函數的完整文檔請參閱
嵌套類

　　我個人覺得需要重復 CSS 塊指示同級樣式非常討厭 下面是一個典型示例

　　#container h {
             }
   #container p {
             }
   #container p a {
             }
   #container img {
             }
           

　　在編寫得很好的普通 CSS 中實際上可以避免很多重復但使用平面列表布局樣式的方式並不是最好的 在這種情況下最好使用一些層次結構 在 LESS 中可以像這樣嵌套樣式規則

　　&ntainer {
     h {
       fontsize: em;
      color: fade(# %);
      a {
        color: #;
        &:hover {color: red;}
       }
     }
   }
           

　　經過處理後前面的 LESS 代碼會產生下面的樣式

　　&ntainer h
  &ntainer h a
  &ntainer ha:hover
           

　　服務器端處理

　　您可以原樣下載 LESS 代碼在客戶端通過 JavaScript 代碼對其進行處理 也可以在服務器上進行預處理然後將它作為普通 CSS 下載到客戶端 在前一種情況下完全像使用普通 CSS 文件一樣服務器端更改在下一次頁面刷新時應用到客戶端

　　如果您注重性能處理的是大型復雜 CSS 文件則服務器端預處理可能是更好的選擇 服務器端預處理發生在您每次修改服務器上的 CSS 時 您可以在生成過程結束時手動完成額外的步驟 使用 LESS 編譯器從命令行將 LESS 代碼預處理為 CSS 此編譯器是為服務器端工作安裝的 less NuGet 軟件包的一部分

　　不過在 ASPNET MVC 中可以將 LESS Framework 與捆綁機制集成有關捆綁機制請參閱我在 年 月的專欄CSS 編程捆綁和縮小(msd/magazine/dn) 這確保只要請求 LESS 文件就會執行 LESS 到 CSS 的轉換 還確保通過 IfModifiedSince 標頭正確管理緩存 最後您可以將分析和縮小混合起來 要在 ASPNET MVC 中集成 LESS首先需要下載並安裝 less NuGet 軟件包 然後將以下代碼添加到 BundleConfig 類

　　var lessBundle =
     new Bundle("~/myless")IncludeDirectory("~/content/less" "*less");
   lessBundleTransformsAdd(new LessTransform());
   lessBundleTransformsAdd(new CssMinify());
   bundlesAdd(lessBundle);
           

　　捆綁將打包在指定文件夾中找到的所有 less 文件 LessTransform 類負責 LESS 到 CSS 的轉換 該類使用 less API 分析 LESS 腳本 LessTransform 的代碼非常簡單

　　public class LessTransform : IBundleTransform
   {
     public void Process(BundleContext context BundleResponse response)
     {
       responseContent = dotlessCoreLessParse(responseContent);
       responseContentType = "text/css";
     }
   }
           

　　更多智能工具

　　LESS 不是唯一的 CSS 預處理器 例如 Syntactically Awesome Stylesheets (Sass) 就是另一種常見的工具 () 實際上無論使用什麼工具CSS 預處理器都是廣泛的 Web 編程需要考慮的工具 無論是圖形設計人員還是開發人員都需要更多智能工具來管理和組織 CSS 代碼 最好同時將它們集成到 Web 平台 最後請注意Visual Studio 和 Visual Studio 通過 Web Essentials 擴展提供出色的 LESS（及相關技術）支持Web Essentials 擴展可從 下載 此外還可以從 Visual Studio Update 和即將發布的 Visual Studio 中獲得 LESS 編輯器

From:http://tw.wingwit.com/Article/program/Web/201404/30643.html