概述
一个leaner style sheets (less)是一种动态预处理语言，其基本语言是层叠样式表（css）。所有预处理语言都是基本语言的升级版本，因此less也具有许多附加功能。less具有变量、父选择器、混合、嵌套选择器等功能。在java中，编译“.java”文件的源代码会生成输出文件“.class”，同样地，编译less文件的“.less”文件会生成一个新文件“.css”作为输出。
方法
在您的桌面或命令行（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”文件的网页。
LESS Example @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; }LESS
LESS stands for (Leaner Style Sheets)
下面给出的图像显示了在编译“style.less”时的输出，当网页构建并与css链接时，它显示的是只显示HTML部分而没有样式的页面。在编译“style.less”文件后，文件中编写的样式被编译，并创建了一个style.css文件，它显示了以下给出的具有适当样式的网页输出。
结论
在构建大型项目时，精简样式表（LESS）非常有用，因为大型项目需要维护一个庞大的“css”文件。因此，“LESS”提供了变量的功能，这样可以避免代码混乱。与“CSS”相比，维护“LESS”代码更容易，例如，如果我们想要更改网站上按钮的样式，假设我们需要更改按钮的边框半径和背景颜色，那么我们只需要在“LESS”文件的变量中进行两处更改，而不是在每个CSS元素中进行样式更改，这样可以让开发人员的工作更加轻松。
以上就是如何创建LESS文件和如何编译它的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551973.html
微信扫一扫 
支付宝扫一扫 
