vscode中安装less插件并配置使用

什么是less？

Less是一种CSS的扩展和动态样式表语言，CSS预处理器；

在客户端或服务端运行，可自定义/管理/重用网页的样式表。

Less是一种开源语言，也是跨浏览器兼容的语言。

Less是一门css预处理语言；

扩展了css语言，增加了变量、Mixin、函数等特性；

使css更容易维护和扩展。

它不是一个直接使用的语言，而是一个生成css的语言。

Less可以运行在Node或浏览器端。

使用Less的好处

1. less是动态的样式表语言，通过简单，明了的语法定义，使编写css 的工作变得非常简单，在实际项目开发中，大大提高了前端工程师的工作效率。
2. css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，造成这些困难的很大原因源于css是一门非程序性语言，没有变量，函数，scope等概念；
3. less在css基础上引入了变量，混入，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，less可以让我们用更少的代码做更多的事。

步骤：

1. 到扩展商店下载easy Less的插件
   
   
   image.png
   
   
   image.png

2.点击右下方到螺丝钉图片，然后在弹出来的菜单栏中点击“设置”

image.png

image.png

3.点击右上角标记的图标，进入setting.json进行配置

//如果是微信小程序则加上：
"less.compile": {
       "outExt": ".wxss"
    }
//如果是css那么配置就加上：
"less.compile": {     "compress": false,//是否压缩
     "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
     "out": true, // 是否输出css文件，false为不输出
     "outExt": ".css", // 输出文件的后缀
    }

image.png