less （一） less 的环境

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

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

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

第一步：全局安装 less

less （一） less 的环境

上面我们就安装了less;

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

less （一） 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文件；

less （一） less 的环境

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

less （一） less 的环境

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

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

浏览器打开index.html 显示：背景的样式已经成为我们设置的样式

less （一） less 的环境

总结：（1） node 环境下使用npm 安装 less；

（2） lessc sty.less sty.css 这个是编译命令将sty.less文件编译成 sty.css文件；

（3）我们使用的是 .css文件；

less （一） less 的环境

相关推荐