如何将 LESS 预编译到 CSS 中？

在本文中，我们将讨论如何将 LESS 文件预编译为 CSS 文件，并通过示例了解其实现。

简介： LESS 是一个简单的 CSS 预处理器，可以为网站创建可管理、可定制和可重用的样式表。 LESS 是一种向后兼容的 CSS 语言扩展以及动态样式表语言功能，可提高 CSS 的工作能力。它允许使用变量并提供编程语言的功能。但是，如果我们想在网页上使用 LESS 之前将其预编译成 CSS，我们可以使用 npm 包管理器的 LESS 包来实现。这样，我们就可以用less变成一个简单的HTML网页了。

配置 LESS 以将其预编译成 CSS：我们可以使用以下命令从 npm 安装最新版本的 LESS 包。在我们运行以下命令之前，必须在系统上安装 node.js。详细安装过程请参考 Node.js NPM（Node Package Manager）一文。现在，运行以下命令以全局安装 LESS 编译器。

句法：

npm install less -g

注意：如果由于权限问题导致安装过程出现问题，请以管理员身份运行命令提示符。

将 LESS 预编译为 CSS：要将 LESS 编译为 CSS，我们在命令提示符下使用以下命令。 lessc命令让我们可以将 LESS 文件预编译成基本的 CSS 文件。这有助于我们使用 LESS 编程编写模块化代码，并且仍然可以通过将 CSS 编译成传统的快速 CSS 来获得 CSS 的所有好处。

句法：

lessc  [destination]

在哪里，

• ： LESS 文件的完整名称以及当前工作目录中的地址。
• [destination]：所需 CSS 文件的完整名称以及当前工作目录中的地址。

示例 1：如果我们在当前工作目录中有一个文件style.less ，并且我们想将它编译成一个 CSS 文件作为同一目录中的style.css 。我们使用以下命令：

lessc style.less style.css

此命令将 LESS 文件style.less转换为 CSS 文件style.css 。

少文件：

.container {
   .base-container {
       font-size: 24px;
   }
   .base2-container {
       font-size: 48px;
   }
}

CSS 文件：

.container .base-container {
 font-size: 24px;
}
.container .base2-container {
 font-size: 48px;
}

输出：

输出

示例 2 ：如果我们在另一个目录中有一个文件style.less （在本例中，它在“D:\Geeksforgeeks”中），而不是在当前目录中，我们希望将它编译成一个 CSS 文件作为style.css在同一目录中。我们使用以下命令：

lessc D:\Geeksforgeeks\style.less D:\Geeksforgeeks\style.css

此命令将 LESS 文件style.less转换为 CSS 文件style.css 。

少文件：

@primary-color: #0000ff;
@padding: 4px;
.container {
   .base-container {
       font-size: 24px;
       padding-right: round(@padding);
       color: @primary-color;
   }
   .base2-container {
       font-size: 48px;
       padding-right: round(@padding);
       color: @primary-color;
   }
}

CSS 文件：

.container .base-container {
 font-size: 24px;
 padding-right: 4px;
 color: #0000ff;
}
.container .base2-container {
 font-size: 48px;
 padding-right: 4px;
 color: #0000ff;
}

输出：

输出

示例：在此示例中，我们使用了上面生成的从 LESS 预编译的 CSS 代码。

HTML

  

    
    

  

    

        

            Welcome to GeeksforGeeks
        
        

            A Computer Science portal for geeks.
        
    

  

输出：