Essential Studio：LESS和CSS之间的区别以及LESS与CSS相比的优势（下）

Syncfusion的目标是生产世界级的Windows Forms、ASP.NET以及WPF控件，这些控件使开发者能为要求最苛刻的环境开发高质量软件。在此文章中，阐述了LESS和CSS之间的区别以及LESS与CSS相比的优势。

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相比的优势（上）

想要购买文中产品正版授权，或了解更多产品信息请点击“咨询在线客服”

标签：