發行項
08/13/2015

本文章是由機器翻譯。

技術最前線

程式設計 CSS：以 LESS 成多

在本文中，我將討論 Web 開發為動態生成的 CSS 內容使用較少的框架。

毫無疑問，CSS 代表與它的諾言的一大飛躍 — — 很大程度上履行 — — 完全分離的 Web 頁的演示文稿內容。雖然 CSS 是（或應該是?）在設計師的領土，它預示著分離關注到的幾乎每個開發者是敏感的原則。所以使用 CSS 的快速撿，已成為深深紮根于 Web 發展到它有時難以跟上現代的 Web 網站的點入。

點不是 CSS 是不足以風格現代、以圖形方式豐富和有吸引力的 Web 網站，而是一種純粹的聲明性語言並不總是適當表達複雜和相互聯繫的樣式聲明。值得慶倖的是，瀏覽器可以仍然是有意義的任何 CSS，只要它正確寫 — — 但我們可以說一樣為人嗎？

在 Web 開發中一個相對較新的方向的目的是使開發人員和設計人員可以更可持續的方式生產的相同的 CSS 生成 CSS 周圍的基礎設施。最後樣式表的瀏覽器不會改變，但它產生的方式應該不同，更易於閱讀，更易於管理。

這一領域的 Web 開發開始幾年前和現在日漸成熟，如幾個可用的框架可以幫你與動態 CSS 內容生成。我會提供一個執行摘要的這些框架之一 — — 少框架 — — 和顯示如何可以與ASP.NETMVC 解決方案集成。

為什麼不呢？

其中一個最大的問題開發商位址與較不是資訊的重複。作為軟體發展人員，您可能知道"不要重複你自己"(幹) 原則和應用它的每一天。乾洗的主要好處是它減少了相同的資訊存儲的地方，從而學額應予以更新的數目。

在純 CSS，你只需有不幹的問題。例如，在某些其他情況下，如果在多個類中使用一些顏色，您必須更改它，你可能有沒有更好的方法比更新它在每個單個匹配項。CSS 類讓您定義顯示該跳舞的某些元素，重用它們跨頁以相同的方式的樣式相關的元素。雖然 CSS 類肯定減少重複，他們有時在其他方面的不足。

CSS 類的一個問題是他們在一級的語義的 HTML 元素的操作。在建立各種 CSS 類，您往往面臨著重複的資訊，如顏色或寬度的小塊。輕鬆地不能為每個這些可重複的小塊有一個類。即使您管理要為幾乎任何可重複的樣式，如顏色和寬度，然後當要設置語義元素的樣式的 CSS 類 — — 說，一個容器 — — 你應該串聯多個 CSS 類在一起要達到預期的效果。

如果你用過一個架構，例如引導設計您的 Web 頁，你知道我的意思。以下為範例：

<a class="btn btn-primary" ...
/>

將要 (類 btn) 按鈕，然後特別風味的按鈕 (類 btn 小學)，第一次設置錨點。這種方法有效，但它可能需要一些重要的工作要提前計畫你需要的類。它的結果往往是在最後期限的邊緣的 Web 專案中的開銷。

如一種動態的樣式表語言少表示一種橫向的思維。你不要花任何時間試圖使純 CSS 更聰明；您只需使用不同的工具 — — 主要是語言 — — 以生成它。較少，因此，是一種框架，將程式師友好概念添加到 CSS 編碼，例如變數、塊和職能。

嚴格有關 CSS 的動態生成是它加工到純 CSS 的瀏覽器要消耗的問題。用戶端可以處理較少的代碼通過特設的 JavaScript 代碼或預處理它在伺服器上，所以瀏覽器只收到最後 CSS。

設置較少的ASP.NETMVC

我會演示怎樣才能少使用從ASP.NETMVC 應用程式中。一開始，我將重點介紹的代碼更少的用戶端處理。在頭部分的佈局檔中，添加以下內容：

<link rel="stylesheet/less"
  type="text/css"
 href="@Url.Content("~/content/less/mysite.less")" />
<script type="text/javascript"
 src="@Url.Content("~/content/scripts/less-1.3.3.min.js")"></script>

這假定您已經在專案來包含您較少的檔中創建內容/較少的資料夾。您需要一個 JavaScript 檔來做實際少-到-CSS 在瀏覽器內部處理。你可以從指令檔 lesscss.org。我會檢討哪裡少證明有用的幾個方案。

較少在行動：變數

一個好的方法來瞭解較少的變數的作用是通過查找到 CSS 漸變。多年來，設計師用小的 GIF 檔來繪製 HTML 容器用漸變的背景。最近，瀏覽器添加 CSS 支援為梯度。這些也是通過線性漸層的語法和及其變化官方 CSS3 標準的一部分。不幸的是，如果你想要確保漸變撿的最廣泛的瀏覽器，你必須求助於中的代碼類似圖 1。

中的代碼圖 1 是幾乎不可讀的。更糟糕的是，它必須重複任意位置你想要的漸變。另外，如果你想的改變漸變顏色略（或只是飽和度或褪色），唯一的選項手動編輯所有匹配項。不拐彎抹角，這可能是極為艱難。然而，它是唯一的它可以工作在純 CSS 中的方式。

圖 1 綜合代碼為在廣泛的瀏覽器中顯示漸變

/* Old browsers fallback */
background-color: #ff0000;
background: url(images/red_gradient.png);
background-repeat: repeat-x;
/* Browser specific syntax */
background: -moz-linear-gradient(  left,  #fceabb 0%, 
  #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -Webkit-linear-gradient(  left, #fceabb 0%,
  #fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: -o-linear-gradient(  left, #fceabb 0%,
  #fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: -ms-linear-gradient(  left, #fceabb 0%,
  #fccd4d 50%,#f8b500 51%,#fbdf93 100%);
/* Standard syntax */
background: linear-gradient(  to right, #fceabb 0%,
  #fccd4d 50%,#f8b500 51%,#fbdf93 100%);

若要查找更好的解決方案，您需要查看外部 CSS 並輸入小於領土。在較少，一次定義的 CSS 漸變，並提到它的名字在適當的情況。以下為範例：

.background-gradient-orange { background: #fceabb; ...
}
.container { .background-gradient-orange; }

在適當情況下名為背景漸變橙色的類被嵌入中類容器和任何其他類的名稱。雖然，漸變的定義是保存在同一位置。

沒有什麼在這革命性的如果你從開發人員的角度來看它。但是，它使用一種功能 — — 變數 — — 那就不存在，在 CSS 中。事實上，前面的語法中，不起作用如果您保存並引用作為一個普通的樣式表檔。一些代碼是所需的擴展的語法變成純 CSS。少 JavaScript 解析器不會只是這並擴展到其實際的 CSS 內容的變數。

變數也適用于標量值（如顏色或大小。考慮較少的代碼如下：

@black: #111;
#main {  color: @black; }
.header { background-color: @black; }

分析器將 @black 變數擴展到所賦的值並將它替換整個檔。淨效果是您更改在同一個地方的實際顏色和更改自動波紋通過檔。

較少在行動：Imports

在必要的情況下，您可以跨多個檔、參考檔和所包含的類拆分您更少的代碼。例如，假設您創建一個 gradients.less 檔，下面的內容：

.background-gradient-orange { background: #fceabb; ...
}

在另一種較檔，說是 main.less，您可以通過導入該檔引用任何漸變：

@import "gradients";
.container { .background-gradient-orange; }

如果 gradients.less （副檔名不嚴格要求）生活在一個不同的資料夾，你應表明在調用導入中的路徑資訊。

少 Mixins

我呼籲少工件漸變變數。太挑剔，這並不完全正確。在較少，一個變數包含單個值。一個 CSS 類的容器被稱為混合料攪拌設備。這是類似于函數，但不包含任何自訂邏輯。就像一個函數，較少廠拌可以採取和工藝參數。考慮中的代碼圖 2 的演示混合料攪拌設備。

在圖 2，命名為影廠拌定義的樣式框中陰影和公開的顏色作為外部參數。同樣，文字方塊中廠拌定義一個輸入欄位的基本外觀。它導入的陰影定義並保持寬度參數化。這種方式，定義為輸入欄位（迷你，正常的和大) 大小不同的三個類是微風。更重要的是，它需要一小部分的編輯，並採取只最小的努力更新（請參閱圖 3)。

圖 2 Mixins 少框架中

/*  Mixins  */
.shadow(@color) {
  box-shadow: 3px 3px 2px @color;
}
.text-box(@width) {
  .shadow(#555);
  border: solid 1px #000;
  background-color: #dddd00;
  padding: 2px;
  width: @width;
}
/*  CSS classes  */
.text-box-mini {
  .text-box(50px);
}
.text-box-normal {
  .text-box(100px);
}
.text-box-large {
  .text-box(200px);
}

圖 3 較少 Mixins 在行動

Mixins 可以接受多個參數，也可變數目的參數。此外，各個參數支援預設值：

.mixin(@color: #ff0) { ...
}

少不是運算式的豐富的程式設計語言，和由它缺少命令來表示條件或迴圈的設計。然而，行為的混合料攪拌設備仍可以傳遞的值而異。假設你想要給一個更大的按鈕，較粗的邊框和字體。您定義參數化廠拌命名按鈕並使用關鍵字"什麼時候"，將設置綁定到一個條件。條件必須基於一個單一的參數：

.button (@size) when (@size < 100px) {
 padding: 3px;
 font-size: 0.7em;
 width: @size *2;
}
.button (@size) when (@size >= 100px) {
  padding: 10px;
  font-size: 1.0em;
  font-weight: 700;
  background-color: red;
  width: @size *3;
}

您將應用不同的設置，但您還可以使用基本操作將大小乘以一個因素。下一步，使用 mixins 在實際的 CSS 類中：

.push-button-large {
  .button(150px);
}
.push-button-small {
  .button(80px);
}

運行此代碼的結果所示圖 4。

圖 4 使用較少 Mixins 中的 CSS 類的影響

較不附帶了一長串的處理顏色的預定義函數。您有要變暗、變亮和飽和的顏色按百分比和淡顏色出一個百分比，由函數，如下所示：

.push-button {
  background-color: fade(red, 30%);
}

關於支援較少的函數的完整文檔，請檢查 lesscss.org。

嵌套類

我個人覺得相當討厭的需要重複 CSS 塊來指示一個同級的樣式。一個典型的例子是：

#container h1 { ...
}
#container p { ...
}
#container p a { ...
}
#container img { ...
}

在精心編寫的純 CSS，你其實可以避免很多重複，但規定樣式的方式 — — 使用平板上市 — — 不是最優。在這種情況下，有點層次結構是可取的。在較少，您可以嵌套樣式規則像這樣：

.container {
  h1 {
    font-size: 0.8em;
   color: fade(#333, 30%);
   a {
     color: #345;
     &:hover {color: red;}
    }
  }
}

一旦處理，在之前較少的代碼產生以下樣式：

.container h1
.container h1 a
.container h1a:hover

伺服器端處理

您可以下載代碼更少，因為和通過 JavaScript 代碼在用戶端上對其進行處理。此外可以預處理的伺服器上，並將其下載到用戶端作為純 CSS。在前一種情況，一切正常，如果您在使用純 CSS 檔：伺服器端更改將應用到下一個頁面刷新的客戶機。

如果您有性能問題，處理大型、複雜的 CSS 檔，伺服器端預處理可能是更好的選擇。每次您修改伺服器上的 CSS 伺服器端預處理發生。您可以手動照顧在結束了在生成過程中額外的步驟。你預處理到使用較少從命令列編譯器的 CSS 代碼更少。編譯器是拉丁文 NuGet 包你安裝伺服器端的工作的一部分。

ASP.NETMVC 4，然而，你可以少框架與集成在我 2013 年 10 月的專欄文章，涵蓋的捆綁機制"CSS 程式設計：捆綁放縮法"(msdn.microsoft.com/magazine/dn451436)。這可確保較少到 CSS 每當你做出較少的檔的請求執行轉換。它還確保緩存通過如果-修改-以來頭妥善管理。最後，您可以混合在一起分析和貼圖層。要集成ASP.NETMVC 中較少，第一次下載並安裝的拉丁文 NuGet 包。第二，將下面的代碼添加到 BundleConfig 類：

var lessBundle =
  new Bundle("~/myless").IncludeDirectory("~/content/less", "*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

捆綁包將包在指定的資料夾中找到的所有.less 檔。 LessTransform 類負責少 CSS 轉換。類使用拉丁文 API 來分析較少的腳本。 LessTransform 的代碼是相當簡單的：

public class LessTransform : IBundleTransform
{
  public void Process(BundleContext context, BundleResponse response)
  {
    response.Content = dotless.Core.Less.Parse(response.Content);
    response.ContentType = "text/css";
  }
}

更智慧的工具

少外面不是唯一的 CSS 預處理器。語法上令人敬畏的樣式表（青菜）是最受歡迎的另一個（上海社會科學院 lang.com），為只是一個例子。底線是無論該工具，CSS 預處理器絕對是什麼要考慮廣泛的 Web 程式設計。無論您是一點陣圖形設計師或開發人員，更智慧的工具來管理和組織 CSS 代碼是幾乎必不可少的。他們更好的時候他們還集成到 Web 平臺。最後，注意Visual Studio2012年和 2013Visual Studio提供出色支援較少（和相關的技術）通過 Web 要點擴展，你可以在下載 vswebessentials.com。此外，較少編輯器是在Visual Studio2012年更新 2 和即將舉行的Visual Studio2013年可用。

Dino Esposito 是"構建移動解決方案的企業"（微軟出版社，2012年）的作者和即將舉行"程式設計ASP.NETMVC 5"（Microsoft Press）。為.NET 和 Android 平臺在 JetBrains 和經常在世界各地的行業活動發表演講的技術傳教士，埃斯波西托共用的軟體，他的理想 software2cents.wordpress.com 和在 Twitter 上 twitter.com/despos。

衷心感谢以下技术专家对本文的审阅：自從 Kristensen (Microsoft)
自從 Kristensen 是在 Web 平臺上的程式經理 & 在 Microsoft，工作的 Web 開發者經驗的Visual Studio工具團隊。他有超過十年的發展在 Microsoft 平臺上的 Web 應用程式的經驗。他創辦了 BlogEngine.NET 開放原始碼專案，成為了最受歡迎的博客應用在ASP.NET平臺上，使用世界各地的 80 萬人。 Kristnsen 也是一些受歡迎Visual Studio擴展包括 Web 要點、圖像優化器和 CssCop 的建立者。