Syncfusion的目標(biāo)是生產(chǎn)世界級的Windows Forms、ASP.NET以及WPF控件，這些控件使開發(fā)者能為要求最苛刻的環(huán)境開發(fā)高質(zhì)量軟件。通過Syncfusion控件，開發(fā)人員可以快速而方便地將頂級的功能以及最新的界面添加到.NET應(yīng)用程序中。

查看Syncfusion系列產(chǎn)品

當(dāng)您遇到奇怪的樣式問題時(shí)，處理大量普通的CSS可能會很煩人。處理復(fù)雜的Web應(yīng)用程序時(shí)，請盡可能保持CSS代碼整潔。因此，您需要LESS預(yù)處理器來簡化工作并節(jié)省時(shí)間。但是，在開始使用任何預(yù)處理器之前，您還應(yīng)該具有CSS知識并了解其基本體系結(jié)構(gòu)。

在此文章中，闡述了LESS和CSS之間的區(qū)別以及LESS與CSS相比的優(yōu)勢。

什么是CSS預(yù)處理程序？

CSS預(yù)處理器是一種腳本語言，可以從另一種類型的代碼生成等效的CSS語法，從而使Web瀏覽器可以讀取它。通過基本CSS應(yīng)用的樣式在整個(gè)應(yīng)用程序中將始終是靜態(tài)的。而預(yù)處理器使您可以編寫條件代碼段，以便在需要時(shí)動(dòng)態(tài)應(yīng)用樣式。

另外，預(yù)處理器允許您維護(hù)標(biāo)準(zhǔn)的代碼結(jié)構(gòu)，以更易讀的方式顯示樣式表，從而可以跟蹤大型Web應(yīng)用程序的樣式。

CSS

如果您是新的前端開發(fā)人員，則必須首先知道如何編寫基本CSS才能更好地了解預(yù)處理器的工作原理，因?yàn)轭A(yù)處理器本身將在最終階段編譯并生成CSS。

初學(xué)者選擇CSS可以自定義HTML元素的外觀，因?yàn)樗哂泻唵涡院突緲邮秸Z法。CSS使您能夠以易于理解的方式輕松控制網(wǎng)頁的各個(gè)部分，例如頁眉、頁腳、內(nèi)容。

您可以通過將靜態(tài)CSS樣式設(shè)置為元素的屬性來內(nèi)聯(lián)定義靜態(tài)CSS樣式，也可以將它們保留在單獨(dú)的CSS文件中，并在需要將其應(yīng)用于HTML元素時(shí)專門引用它們。

LESS

LESS，也稱為Leaner樣式表，是一種動(dòng)態(tài)CSS預(yù)處理程序，可在服務(wù)器或客戶端的運(yùn)行時(shí)期間編譯并生成CSS。LESS具有高級功能（如變量替換、混合、操作、組合功能），這些功能有助于以更智能的方式設(shè)計(jì)布局，并支持最小但靈活的代碼使用。

您甚至可以在整個(gè)代碼中重用定義的樣式。而且，它與不同的瀏覽器廣泛兼容。

為什么不使用CSS？

LESS有許多優(yōu)點(diǎn)，使其相對于CSS更好。我將向您介紹其一些重要功能：變量、mixin、操作、嵌套和函數(shù)。

變量

與在其他編程語言中定義變量的方式類似，您可以在LESS中設(shè)置一個(gè)變量，然后在整個(gè)程序中對其進(jìn)行訪問。所有變量均應(yīng)以@符號為前綴。它們可以存儲任何類型的值，例如選擇器、屬性名稱、顏色、尺寸、URL、字體名稱等。

在這里，將變量定義為@ bg-color，并在兩個(gè)HTML元素上重用了該變量以設(shè)置背景色。您甚至可以在公共位置定義此類變量，然后在所需的整個(gè)應(yīng)用程序中重復(fù)使用它們。

LESS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@ bg-color：＃3FFD45;</font></font><font></font>
<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   背景顏色：@ bg-color;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
p {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   背景顏色：@ bg-color;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

編譯的等效CSS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
p {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

mixin

mixin就像一個(gè)變量，但是唯一的區(qū)別是它代表了整個(gè)類。您可以將一組屬性分組為一個(gè)特定的類名，并在必要的地方調(diào)用它們，以避免重復(fù)的代碼定義。

它還充當(dāng)函數(shù)并接受參數(shù)。通過將這些參數(shù)值分配給規(guī)則集內(nèi)定義的屬性組來工作。

在下面的代碼中，使用ID和類選擇器（參數(shù)混合）的一組屬性定義了混合，并從另一個(gè)規(guī)則集中調(diào)用了這些混合。

LESS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">#divContent {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   顏色：＃F3455A;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
.sensitive-div（@height：20px; @width：40px）{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   高度：@height;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   寬度：@寬度;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  #divContent;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
.outer-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   .sensitive-div（50px; 80px）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
.inner-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   .sensitive-div（）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

編譯的等效CSS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">#divContent {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  顏色：＃F3455A;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
.outer-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  高度：50px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  寬度：80px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  顏色：＃F3455A;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
.inner-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  高度：20px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  寬度：40px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  顏色：＃F3455A;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

本文內(nèi)容尚未完結(jié)，請點(diǎn)擊下方鏈接查看后半部分內(nèi)容~您可以下載相關(guān)組件ASP.NET Core、ASP.NET MVC、JavaScript進(jìn)行嘗試~

相關(guān)內(nèi)容推薦：

Essential Studio：LESS和CSS之間的區(qū)別以及LESS與CSS相比的優(yōu)勢（下）

想要購買文中產(chǎn)品正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊