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文件,写入代码


webstorm+less环境搭建_第1张图片

webstorm+less环境搭建_第2张图片

webstorm+less环境搭建_第3张图片

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


webstorm+less环境搭建_第4张图片

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


webstorm+less环境搭建_第5张图片

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

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


工作到这里就完成了。

你可能感兴趣的:(webstorm+less环境搭建)