如何创建 LESS 文件以及如何编译它

htmlweb developmentfront end technology更新于 2024/3/21 16:12:17

概述

精简样式表 (LESS) 是一种动态预处理语言，其基础语言是层叠样式表 (CSS)。所有预处理语言都是基础语言的升级版本，因此 LESS 还具有许多附加功能。LESS 具有变量、父选择器、混合宏、嵌套选择器等特性。在 Java 中，编译".java"文件的源代码会生成".class"文件;与 Java 中 LESS 文件一样，编译".less"文件会生成一个新文件".css"。

方法

要创建和编译 LESS 文件，我们需要遵循以下步骤:

在桌面或命令行 (cmd) 上打开终端。使用 Node.js 包管理器 (npm) 将 Learner Style Sheets (LESS) 环境全局安装到您的计算机中。

npm install less –g

在桌面上创建一个文件夹。现在打开任意文本编辑器，并在其中编写 LESS 代码。
将包含".less"代码的文件保存为"style.less"。
现在打开命令行界面 (CLI)，使用命令 cd folderName 进入创建"style.less"文件的子文件夹。"cd"表示更改目录。
进入 less 文件文件夹后，输入以下命令编译"style.less"，并将创建"style.css"文件。

lessc style.less > style.css

打开文件"style.css"，其中的代码将是"style.less"文件转换后的css代码。

功能

精简样式表 (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"编译器，则可以在命令行界面 (CLI) 上使用以下命令进行检查。

lessc –v

如果您的计算机上已安装"less"编译器，您将获得其版本的输出。

步骤 2 - 在桌面上创建一个名为"LESS"的文件夹。在任何文本编辑器中创建一个 HTML 文件，并在其中编写 HTML 样板代码。

步骤 3 − 在同一文件夹中创建一个"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 桌面，cd less 命令进入目标文件夹。

步骤 5 - 现在使用命令编译"style.less"文件。

lessc style.less > style.css

步骤 6 - 编译文件后，"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"提供了变量功能，不会使代码变得混乱。维护"LESS"代码比维护"CSS"代码更容易，就好像我们想改变网站上按钮的样式一样，假设我们必须改变按钮的边框半径和背景颜色，这样我们就不必改变CSS每个元素的样式，而只需在"LESS"文件变量中做两处更改，这使得开发人员的工作更容易。