概述
一个leaner style sheets (less)是一种动态预处理语言，其基本语言是层叠样式表（css）。所有预处理语言都是基本语言的升级版本，因此less也具有许多附加功能。less具有变量、父选择器、混合、嵌套选择器等功能。在java中，编译“.java”文件的源代码会生成输出文件“.class”，同样地，编译less文件的“.less”文件会生成一个新文件“.css”作为输出。
方法
要创建和编译LESS文件，我们需要遵循以下步骤 -
在您的桌面或命令行（cmd）上打开终端。使用节点包管理器（npm）全局安装学习者样式表（LESS）环境到您的计算机中。
npm install less –g
在您的桌面上创建一个文件夹。现在打开任何文本编辑器，并在其中编写LESS 代码。
将包含“.less”代码的文件保存为“style.less”。
现在打开命令行界面（CLI），使用命令 cd 文件夹名称 到达你创建了“style.less”文件的子文件夹。 “cd”表示更改目录。
到达less文件所在的文件夹后，输入下面的命令来编译“style.less”，将会生成一个“style.css”文件。
lessc style.less > style.css
打开文件“style.css”，其中的代码将是“style.less”文件转换后的css代码。
特点
Leaner Style Sheets（LESS）的主要特点是−
变量− Less语言具有一种功能，可以创建变量并将CSS属性值存储在其中。在less文件中创建变量的前缀是“@”。例如：@width:10rem, @height:10rem, @background: green等。
混合− 此功能提供了不重复编写样式代码的能力。我们可以将上述创建的样式作为其他元素的样式进行重用。
例如 −
@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
width:@width;
height:@height;
}
.profile{
.box(); //.box() is used as mixins to inherit the property of box in profile
}
算法
步骤 1 - 在开始编写代码之前，使用上述提供的方法安装 less 编译器。如果您已经安装了 "less" 编译器，可以使用以下命令在命令行界面上检查。
lessc –v
如果您的计算机上安装了“less”编译器，您将会获得带有其版本号的输出。
步骤2 − 在桌面上创建一个名为“LESS”的文件夹。在任何文本编辑器中创建一个HTML文件，并在其中编写HTML样板代码。
第三步 - 在同一个文件夹中创建一个“style.less”文件，并编写用于样式化网页的代码。
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
步骤 4 − 现在使用命令行界面（CLI）进入子文件夹，我们已经在桌面上创建了这个文件夹。使用 cd desktop，cd less 命令到达目的地。
第五步 − 现在使用命令来编译“style.less”文件。
lessc style.less > style.css
第六步 - 编译文件后，成功创建了“style.css”文件。现在网页已经准备好以适当的样式加载到浏览器中。
示例
在这个例子中，我们将看到当less文件没有编译时网页的样子，以及编译后的样子。为了实现这一点，我们将创建一个链接了css文件和一个文件夹中的"less"文件的网页。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Example</title>
<style>
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
h1 {
background-color: green;
color: white;
text-align: center;
padding: 1rem;
border-radius: 5px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>LESS</h1>
<h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>
下面给出的图像显示了在编译“style.less”时的输出，当网页构建并与css链接时，它显示的是只显示HTML部分而没有样式的页面。在编译“style.less”文件后，文件中编写的样式被编译，并创建了一个style.css文件，它显示了以下给出的具有适当样式的网页输出。
结论
在构建大型项目时，精简样式表（LESS）非常有用，因为大型项目需要维护一个庞大的“css”文件。因此，“LESS”提供了变量的功能，这样可以避免代码混乱。与“CSS”相比，维护“LESS”代码更容易，例如，如果我们想要更改网站上按钮的样式，假设我们需要更改按钮的边框半径和背景颜色，那么我们只需要在“LESS”文件的变量中进行两处更改，而不是在每个CSS元素中进行样式更改，这样可以让开发人员的工作更加轻松。
