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

LESS （代表 Leaner Style Sheets）是一种向后兼容的 CSS 语言扩展。 CSS 本身非常适合定义样式并将它们应用于各种 HTML 元素，但它有一些限制。

CSS 的限制：

• 编写 CSS 代码变得很累，尤其是在大型项目中。
• 由于缺少定义变量、嵌套选择器、表达式和函数等类似编程的功能，维护 CSS 代码很困难。

有几个 CSS 预处理器试图通过支持许多特性来解决其中的一些缺点。 LESS就是其中之一。它具有诸如变量、mixin、操作和函数之类的附加功能。它们有助于使代码更简洁，更易于维护。

创建和存储 LESS 文件：

第 1 步：转到您的项目文件夹，创建一个名为 CSS 的子文件夹 然后在其中创建一个名为styles.less的文件。

步骤2：将以下代码添加到新创建的文件中并保存：

styles.less

@green-color: #25C75C;
@light-color: #ebebeb;
@background-dark: #2b2b2b;
  
body { 
    font-family: 'Lucida Sans', Verdana, sans-serif;
    margin: 25px;
    background: @background-dark;
    color: @light-color;
}
  
h1 {
    color: @green-color;
}
  
a { 
    color: @green-color;
    text-decoration: none;
    &:hover { 
        text-decoration: underline;
    }
}

编译 LESS 文件

步骤 1：移动到终端中的项目目录并编写以下命令：

npm install less

步骤2：您可以使用以下命令检查编译器是否已安装：

lessc -v

第三步：移动到css子文件夹（或者是存放less文件的文件夹）

cd css

第 4 步：编写以下命令：

lessc styles.less styles.css

将创建一个名为styles.css的新文件，其内容如下：

样式.css

body {
  font-family: 'Lucida Sans', Verdana, sans-serif;
  margin: 25px;
  background: #2b2b2b;
  color: #ebebeb;
}
h1 {
  color: #25C75C;
}
a {
  color: #25C75C;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

第 5 步：现在，您可以将此 CSS 文件链接到您的 HTML 文件。

gfg.html

  

    

  

    
Welcome to GeeksforGeeks
  
    

        
            This Link
         will take you to
        the homepage of geeksforgeeks.
    

  

输出：