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

简介: 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的插件

    85.png
    image.png

    84.png
    image.png

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


83.png

image.png


82.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", // 输出文件的后缀
    }

81.png

image.png



目录
相关文章
|
1月前
|
Ubuntu Linux C语言
Ubuntu下安装vscode,并解决终端打不开vscode的问题
Ubuntu下安装vscode,并解决终端打不开vscode的问题
147 0
|
1月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
|
16天前
|
人工智能 NoSQL 机器人
【C++】VS code如何配置使用C++(手把手教学)
【C++】VS code如何配置使用C++(手把手教学)
|
16天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
24天前
|
前端开发
|
1月前
|
NoSQL 关系型数据库 开发工具
最新最全 VSCODE 插件推荐(2023版)
最新最全 VSCODE 插件推荐(2023版)
113 0
|
1月前
|
Java
VSCode 插件Code Runner 中文提示乱码
VSCode 插件Code Runner 中文提示乱码
|
1月前
|
开发者
|
1月前
配置vscode
配置vscode
23 4
|
1月前
|
JavaScript 前端开发 程序员
非专业程序员常用vscode插件
这里的vscode插件, 有四分之一你没用过, 这里的vscode设置, 80%你没设置过, 挖宝随缘
49 5