美文网首页
手把手教在vscode中的配置less插件

手把手教在vscode中的配置less插件

作者: 你若盛开_lbx | 来源:发表于2021-11-10 18:05 被阅读0次

1.Less简介

        Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

2.插件配置

        1.在vscode中搜索easy  less,并安装

        2.在vscode中-按照文件-首选项-设置--->打开设置页面

         3.输入   less.compile,然后按照箭头的步骤,将对应的代码放在对应的位置

"less.compile": {

"compress": true,     // true =>删除多余的空白

"sourceMap": false, // true => generate source maps (.css.map files) 

//.css.map是source map文件。因为bootstrap是用less写的,less会编译成css显示在页面上。但有个麻烦,浏览器里看的都是css第几排,而你编辑的又是less文件,很难对上。这个时候有了source map,浏览器里直接显示less,非常方便,让less和css相互对应

"out": "${workspaceRoot}\\css\\" },  //${workspaceRoot}代表该区域的根目录,然后\\css就代表根目录下面生成一个文件夹-所以最终就是在下面才会有编译出来的css

3.使用说明

    插件使用很方便,完成第2步的配置之后,直接ctrl+s保存对应的less文件,后面就会有相应的文件生成了!

相关文章

网友评论

      本文标题:手把手教在vscode中的配置less插件

      本文链接:https://www.haomeiwen.com/subject/jerizltx.html