如何创建LESS文件和如何编译它

百变鹏仔 3个月前 (09-21) #HTML

文章标签文件

概述

一个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元素中进行样式更改，这样可以让开发人员的工作更加轻松。

文章推荐

如何创建LESS文件和如何编译它

概述

方法

特点

算法

示例

结论

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8