webstorm运行less文件

在编写css代码时，使用less能提高我们编程得效率。

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

那么如何在webstorm上使用less且能够自动生成更新css代码呢？我记录一下

第一步：安装koala软件

koala这个由国人编写的，用于编译sass、less、coffee利器，在最近的短短几个月曝光率不亚 于任何其他的技术。



网盘链接：https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw

提取码：cnbn

安装：

一直next就好了

第二步：新建一个less文件，写入代码

第三步，打开koala，点击+号，选择less所在文件目录



点击想要转换得less文件，注：右边要勾选autoprefix选项，不然css文件无法与less文件自动同步



如果有css文件夹，less转化时css文件的位置默认在css目录下，没有的话跟less文件同一目录



最后，在HTML代码里导入less转换得css文件，再运行

<link href="css/first.css" rel="stylesheet">

工作到这里就完成了。