分类目录

链接

友情链接

统计信息

  • 日志总数:114篇
  • 评论总数:185条
  • 分类总数:11个
  • 标签总数:391个
  • 友情链接:0个
  • 网站运行:3236天

2019年十月
« 3月    
 123456
78910111213
14151617181920
21222324252627
28293031  
>
现在位置:    首页 > html5/css3 > 正文

sublime Text3 less 保存时自动编译成css

html5/css3 暂无评论

1,背景  重装电脑后 ,所有的开发环境都得重装。当装到LESS支持的时候 ,发现 记忆很模糊了 ,因为这是很久之前安装的了,已经很久很久没有动过 LESS这东西,都是一直在使用。于是网上百度了一下 找到了一编 文章,发现 大致是没问题的,但是却把一些细节跳过了,害得很多人 在后面留言说 有问题,不自动生成 各种各样的问题,于是乎就有了这个文章 ,也当是自己的笔记,以防忘记吧。。

说了这么多 ,哪么我们现在开始安装吧  标题 :使sublime Text3 支持LESS

当然我们从两方面去讲

第一方面,就是高亮的问题  ,使sublime 高亮LESS代码 。。操作十分简单粗暴

   CTRL + SHIFT +P  -> 输入 install  -> 选择 packages control:install packages  -> 输入 less

对,第一个匹配到的就是了。没有其它 的了 ,选它,等它自动安装完后,重启你的 sublime Text 3 就能生效;

blob.png

言归正转:

第二方面:LESS编译问题【自动 编译也罢】。。。。

工具:

1,nodejs  -> 自行到官网下载  正接安装就行了,傻瓜式下一步下一步的。。。

2,less.js-windows-master   github 上直接搜就能找到,把这东西解压到你的任意目录 下 ,并在电脑的环境变量中 把这个目录添加到环境变量中去。。

3,less2css 插件 

注意:非常重要  这里你要先执行一下  less.js-windows-master /build.cmd  等它下载完所要的东西,然后你翻开 less.js-windows-master /bin/ 下看是否有一个叫 node.exe的文件 如果没有  到你nodejs的安装目录下把它复制到这里来就可以了


然后我们  进行一个测试 看看这个插件 是否已能运行,

blob.png

看到 执行 lessc style.less >style.css

已生成成功了。。

哪么 到这里我们开始 研究一下  怎么 从让 sublime Text 3 自动 编译 LESS文件 

我们使用到第三个工具  less2css[这个是sublime 插件 ]

安装 : ctrl + shift +p  ->   install packages  -> 输入 less2css  直接安装就可以 了,

安装完成后  ,我们设置一下  performances -> package setting -> less2css -> settings-user [把 settings-default复制到user中]

{

  "autoCompile": true,

  "createCssSourceMaps": false,

  "ignorePrefixedFiles": false,

  "lessBaseDir": "./",

  "lesscCommand": false,

  "main_file": false,

  "minify": true,   //设置为 true

  "minName": true,  //设置为 true

  "outputDir": "./",

  "outputFile": "", //[example.css] if left blank uses same name of .less file

  "showErrorWithWindow": true,

  "autoprefix": false,

  "disableVerbose":false,

  "silent":false

}

完毕  重启sublime   只要 保存less文件就会在相同的目录下生成 一个 同名 css文件 


本文版权归企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改所有,转载引用请完整注明以下信息:
本文作者:admin
本文地址:sublime Text3 less 保存时自动编译成css | 企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改

抱歉!评论已关闭.