简介
LESS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESS文件中的代码不能直接被浏览器解析渲染,需要在koala等软件中编译后,才能生成对应的文件和css代码,然后浏览器解析它。
流程
1.安装node.js(less需要有node.js支持,安装很简单)
2.在vs code中安装Easy less插件
3.在设置中找到settings.json
先找到vs code的左下角的齿轮,然后在找到里面的设置
在点击文本编辑器,在里面找到Code Actions On Save中的在settings.json中编辑
3.在settings.json中进行配置
打开settings.json里面的内容每个人是不一样的
然后在把下面的代码放入settings.json
"less.compile": {
"compress": false, // true => remove surplus whitespace 是否删除多余空白字符
"sourceMap": false, // true => generate source maps (.css.map files) 是否创建文件目录树,true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录,后面路径自行配置。 less和css文件之间的对应关系
"out": true, // false => DON'T output .css files (overridable per-file, see below) 是否编译输出文件
//"outExt":".wxss",//输出文件的后缀,默认为.css 小程序中也是用less
}
完成以上操作后,编译保存Less时,就会生成css文件了。