手把手教在vscode中的配置less插件
2021-11-10 本文已影响0人
你若盛开_lbx
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文件,后面就会有相应的文件生成了!