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

查看Syncfusion系列產品

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

在此文章中，闡述了LESS和CSS之間的區別以及LESS與CSS相比的優勢。前面已經介紹了一部分內容（點此查看），這是緊接前面文章的后半部分內容~

運作方式

您還可以在LESS中對數值、顏色和變量執行基本的算術運算（例如加、減、除和乘）。

在下面的示例中，我首先定義了靜態的寬度和高度變量，然后將.inner-div元素的高度和寬度值分配為其原始值的一半。還通過使用添加操作設置了不同的顏色。

LESS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@ base-color：＃3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
@width：50px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
@height：50px; </font></font><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;">
   寬度：@寬度/ 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   高度：@height / 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   顏色：@ base-color +＃2EED54;</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;">.inner-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  寬度：25像素；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  高度：25px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃6dff99;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

嵌套

為了在處理大量CSS時使代碼更清晰，請使用LESS嵌套功能。您可以通過在另一個選擇器中嵌套一個選擇器來在分層結構中定義樣式表。

在以下示例中，我定義了兩個具有不同高度值但背景色相同的div元素。

LESS代碼

<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;">
  高度：500像素；</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;">
      高度：300像素；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      顏色：＃000000;</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;">
} </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;">
  高度：500像素；</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;">
div .inner {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  高度：300像素；</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;">
  顏色：＃000000;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

功能

LESS中還提供了預定義的功能，使您可以映射JavaScript代碼以操縱值、變換顏色等等。

在以下示例中，我定義了一個div元素，并使用數學顏色運算和顏色定義函數概念對其進行了自定義。

LESS代碼

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@ base-color：＃8765EF;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
@padding：3.5像素;</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;">
顏色：變暗（@ base-color，30％）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
padding-left：圓（@padding）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
padding-right：圓（@padding）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
padding-top：ceil（@padding）* 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
padding-bottom：ceil（@padding）* 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
background-color：rgb（45，100，87）;</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;">
  顏色：＃3712a9;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  padding-left：4px；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  padding-right：4像素；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  padding-top：8像素；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  padding-bottom：8px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  背景顏色：＃2d6457;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>

通過使用這些預定義的功能，您可以輕松地從基色中提取顏色，并在整個網頁中保持相同的顏色系列。因為它類似于JavaScript，所以此方法使在樣式部分中定義邏輯功能變得容易。

結論

市場上還有許多其他預處理器，例如SASS和Stylus。但是，在使用預處理程序之前，應該先掌握CSS的基礎知識。CSS和LESS并不是完全不同的，但是LESS確實提供了使您的項目更容易的附加功能。不僅如此，LESS的編譯版本是實際的CSS。隨時分享您的反饋意見作為對此博客的評論。

Syncfusion提供了大約65個輕量級、模塊化、響應式組件，以使Web應用程序開發盡可能容易。從以下列表中查看我們針對不同平臺的組件：

• ASP.NET Core

• ASP.NET MVC

• JavaScript

相關內容推薦：

Essential Studio：LESS和CSS之間的區別以及LESS與CSS相比的優勢（上）

想要購買文中產品正版授權，或了解更多產品信息請點擊