sublime怎么设置less保存自动编译css文件

2018年1月16日19:53:42 发表评论 162

less是什么,看我之前写过的一篇less入门的文章就可以快速的了解了,今天我们要讲的是写less文件时怎样自动编译出css文件,less文件一般情况下是不能在浏览器上运行的,要加载一个less.js来编译,而且文件要在服务器上运行,这点十分麻烦,写静态页面还要在本地搭建个服务器来测试,不用less吧,学无不用实在是可惜,如果在编辑器写less文件时同时生成相关的css文件呢?我们今天就是是讲这个。

我们需要用到的工具有:

  1. window平台
  2. sublime编辑器
  3. NodeJs
  4. npm包管理器(这个安装NodeJs就自带)

一、安装NodeJs

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

安装包是window的,mac和liunx请自行百度找下载链接,按步骤安装好之后,我们需要配置nodejs的系统环境变量,这个直接把nodejs的文件路径复制到系统的环境变量里面就可以了,接着在cmd窗口输入nodejs -v,如果成功的话会出现版本号。

sublime怎么设置less保存自动编译css文件

二、安装less相关依赖

我们是使用sublime写less文件自动生成css,首先我们要先安装lessc。这个直接用nodejs自带的npm包管理器就可以了,只需要在cmd窗口输入:

npm install less -g

检测lessc是否安装成功:

$ lessc -v

安装less-plugin-clean-css

这个插件要和lessc安装在同一个目录下,我们也可以通过npm包一行代码安装:

npm install less-plugin-clean-css -g

安装sublime插件less2css

直接通过sublime中的package,ctrl+shift+p>输入install Package搜索Less2css按Enter就可以安装成功了。

PS:我们用sublime新建一个less文件保存一下,你就会发现在同级目录下会生成一个同名.css文件。

sublime中less文件高亮:在sublime中安装插件less就可以了,步骤和上面安装less2css一样

三、配置sublime less

生成的css文件默认是压缩的,如果你想设置less2css不开启压缩,你可以从Preferences > Package Settings > Less2CSS > User设置less2css不开启压缩,配置代码:

{ "minify": false }

 

总结:less前端工具真心很方便,写css复用性加强了,代码维护性也好了,写起css来更是提高了不少的效率,俗话说:“工欲善其事必先利其器”,工具用好,可以为工作节省不少时间。

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: