less （一） less 的环境

最新推荐文章于 2024-08-15 14:30:00 发布

cvper

最新推荐文章于 2024-08-15 14:30:00 发布

阅读量736

点赞数

分类专栏： less 文章标签： less 编译 node npm lessc

本文链接：https://blog.csdn.net/cvper/article/details/80020486

版权

less 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>