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相比的优势。

什么是CSS预处理程序/strong>

CSS预处理器是一种脚本语言，可以从另一种类型的代码生成等效的CSS语法，从而使Web浏览器可以读取它。通过基本CSS应用的样式在整个应用程序中将始终是静态的。而预处理器使您可以编写条件代码段，以便在需要时动态应用样式。

另外，预处理器允许您维护标准的代码结构，以更易读的方式显示样式表，从而可以跟踪大型Web应用程序的样式。

CSS

如果您是新的前端开发人员，则必须首先知道如何编写基本CSS才能更好地了解预处理器的工作原理，因为预处理器本身将在最终阶段编译并生成CSS。

初学者选择CSS可以自定义HTML元素的外观，因为它具有简单性和基本样式语法。CSS使您能够以易于理解的方式轻松控制 页的各个部分，例如页眉、页脚、内容。

您可以通过将静态CSS样式设置为元素的属性来内联定义静态CSS样式，也可以将它们保留在单独的CSS文件中，并在需要将其应用于HTML元素时专门引用它们。

LESS

LESS，也称为Leaner样式表，是一种动态CSS预处理程序，可在服务器或客户端的运行时期间编译并生成CSS。LESS具有高级功能（如变量替换、混合、操作、组合功能），这些功能有助于以更智能的方式设计布局，并支持最小但灵活的代码使用。

您甚至可以在整个代码中重用定义的样式。而且，它与不同的浏览器广泛兼容。

为什么不使用CSS/strong>

LESS有许多优点，使其相对于CSS更好。我将向您介绍其一些重要功能：变量、mixin、操作、嵌套和函数。

变量

与在其他编程语言中定义变量的方式类似，您可以在LESS中设置一个变量，然后在整个程序中对其进行访问。所有变量均应以@符 为前缀。它们可以存储任何类型的值，例如选择器、属性名称、颜色、尺寸、URL、字体名称等。

在这里，将变量定义为@ bg-color，并在两个HTML元素上重用了该变量以设置背景色。您甚至可以在公共位置定义此类变量，然后在所需的整个应用程序中重复使用它们。

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就像一个变量，但是唯一的区别是它代表了整个类。您可以将一组属性分组为一个特定的类名，并在必要的地方调用它们，以避免重复的代码定义。

它还充当函数并接受参数。通过将这些参数值分配给规则集内定义的属性组来工作。

在下面的代码中，使用ID和类选择器（参数混合）的一组属性定义了混合，并从另一个规则集中调用了这些混合。

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>

相关内容推荐：

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

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

标签：