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

WBOY 转载: 2023-09-13 16:29:06 237浏览

概述

一个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”编译器，您将会获得带有其版本号的输出。

如何创建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文件和如何编译它的详细内容，更多请关注php中文网其它相关文章！

编译创建 LESS文件 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何添加一个按钮来打印一个HTML页面？下一条：如何在HTML5中流式传输大型.mp4文件？