less （一） less 的环境

最新推荐文章于 2023-04-03 10:11:13 发布

原创最新推荐文章于 2023-04-03 10:11:13 发布 · 825 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #编译 #node #npm #lessc

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Node.js环境中安装并配置LESS预处理器。LESS是一种CSS预处理语言，通过变量和编译命令扩展了CSS的功能。

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；

下面看看如何配置 less 的使用环境；

前提：安装node 环境，了解 npm ,

第一步：全局安装 less

上面我们就安装了less;

第二步：我这里在 f 盘下创建了一个 less 文件夹，文件夹里面有两个文件 index.html sty.less

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>less第一步</title>
    </head>
    <body>
        开始使用 less 的第一步
    </body>
</html>

sty.less

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;

body{
    //设置背景颜色为上面的变量
    background-color:@bg-color;
}

第三步：上面我们写好了less 文件，但是不能直接使用，所以下一步通过命令把 sty.less 编译成 sty.css文件；

编译完成再来看看我们的文件夹下就出现了一个 sty.css文件，

第四步：这个时候我们就可以在文件中引入这个sty.css文件了；

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>less第一步</title>
        <link rel="stylesheet" href="sty.css">
    </head>
    <body>
        开始使用 less 的第一步
    </body>
</html>