Less实践之安装使用图解

2025-10-04 09:45:49

1、首先，我们需要先下载安装Nodejs；网址这里就不展示了，具体问下度娘就可以了

Less实践之安装使用图解

2、然后我们使用NPM来安装less,使用命令行：npm install -g less

Less实践之安装使用图解

3、出现如图信息，表示正在安装中，基本上都能成功安装；

Less实践之安装使用图解

4、接下来，小编跟伙伴们分享一个简单的Less例子；

首先在nodejs的安装目录中（C:\Program Files\nodejs），建立两个文件，helloless.html和style.less

helloless.html代码：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h1>Welcome to Less</h1>

<h3>Hello Less!!!!!</h3>

</body>

</html>

style.less文件中的代码：

@primarycolor: #FF7F50;

@color:#800080;

h1{

color: @primarycolor;

}

h3{

color: @color;

}

Less实践之安装使用图解

5、使用NPM命令行执行一下，把less文件编译成css文件；

运行 — cmd— lessc style.less style.css—回车

然后看一下是不是在同一目录下又多了一个css文件呢

（无论何时更改LESS文件，都需要在cmd中运行上面的命令，然后更新 style.css 文件。）

Less实践之安装使用图解

6、css文件中的代码自动生成如图

Less实践之安装使用图解

7、最后，浏览器打开helloless.html文件，完成！！！

Less实践之安装使用图解

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。