《進撃的css——less！》
各位前端小伙伴们，我又来了！上一期给大家讲解了通过emmet编写html，来加快html文档开发效率。你们想过吗？css也有奇招来提高开发效率。让咱们请出另一位小伙伴less~~~（喊破喉咙）
在less里我们可以使用嵌套结构来编写css，还可以使用变量来给属性赋值等等，嵌套结构可以使css代码结构像html标签那样层层嵌套，使css代码看起来更为清晰。使用变量可以使css后期维护性更强。所以咱们前端开发者还是有必要了解了解less！！！
好吧，这一期先如何讲讲搭建环境，那咱们废话不多说，干货生放送！
引用less文件
引用less的方法也有好几种，大体上分为 使用js编译 和 软件或者插件预编译 这两种。
使用js编译需要下载js文件，它的原理以及步骤其实是这样的：
- 下载less.js文件并将其引入到html文件里
- 在<style>标签里书写less格式的css样式
- 给<style>标签添加文本识别属性，比如rel、type等，如
<style type="text/less"> - less.js识别到type=“text/less”属性，解析<style>标签内的内容
上述方法是在html的<style>标签里直接写样式，那有没有方法可以像css那样引入外部的less文件呢？
不急，有滴有滴，该方法如下：
- 下载less.js文件并将其引入到html文件里
- 使用<link>标签引入外部less文件，标签书写格式为
<link rel="stylesheet/less" type="text/less" href="less文件路径">，其中属性rel、type取其一即可，本人亲试 - 完成前两步之后，less.js自动对外部less文件进行解析
上述的两种方法有一个共同点，less文件都是在浏览器端实时运行的，这势必会影响网页的加载速度，毕竟每加载一次网页就需要把less文件编译一次嘛。那么有没有一种“一劳永逸”的方式呢？
不急，也是有滴
那就是使用less预编译软件对less文件进行预编译，令我们写好的less文件最终生成可以直接使用的css文件。也就是说，浏览器是不可以直接读取less文件的，我们只是开发的时候为了方便而用less来写样式，最后需要一种专门的软件来把我们写的less文件转码成平时浏览器可以直接识别的css文件，这样只要不改动less源文件，那么每次加载页面加载的直接是css文件，自然不影响网页的加载速度。
less预编译器的使用
less的预编译器这里我推荐koala，这是一款由国人开发的软件（在这里吹一波中国人真棒！耶），算是一款接触过less的开发者必备的一款软件吧。它的使用方法也很简单，先在官网把它下下来（下载貌似要FQ），安装过后打开软件界面如下：
我们点击左边的大大的加号，选择less文件所在的文件夹（注意是最里边的那层文件夹），我这里是名为css的文件夹。
然后我们选择文件夹里的less文件，这时软件的右侧就会弹出一个窗口，我们点击右下角的“执行编译”。
这时文件夹内就会新生成一个编译后的css文件了，把这个文件引入html就可以啦~
对了，另外如果文件夹内新增了文件或者文件有改动时，需要在koala内手动更新，可以点击下面这两个地方（选其一）：
当然，如果你使用的是vsCode，那么可以通过安装插件的方式来快速搭建less的编译环境。这算是本文中最最最简单粗暴的方法了hhhhh。
在vsCode里搜索less关键字，然后安装Easy LESS这个插件就可以直接用了，连重启都不用哈哈哈乐了吧。
好了，以上就是less开发环境搭建的全部内容。
