• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Sublime Text 3之Less2Css插件 介绍和安装方法

JavaScript web前端中文站 2年前 (2017-09-29) 1530次浏览 已收录 0个评论

在介绍Less2Css之前我们先安装一个 less 的语法高亮,用 LESS 的同学都知道,sublime 没有支持 less 的语法高亮,所以这个插件可以帮上我们,可以直接安装 ctrl+shift+p>install Package 搜索 less 按 Enter 就可以了,或者到这里下载,安装成功后,重启 sublime

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

安装步骤

下面安装Less2Css,跟上面一样 ctrl+shift+p>install Package 搜索Less2Css按 Enter 就可以安装了,Less2Css插件依赖 lessc 这个工具,在 windows 下可以下载或者用git cloneless.js-windows到本地目录。然后把目录地址加入到环境变量 PATH 的中,如 D:/less.js-windows-master:

Sublime Text 3 之 Less2Css 插件  介绍和安装方法

设置好之后,通过快捷键 Windows 徽标键+R 键 调出运行窗口,输入 cmd,在命令行中输入 lessc,如果有如下提示则表示设置成功:

C:/Users/Fdream>lessc lessc.wsf: no input files Usage: Single file: cscript 
//nologo lessc.wsf input.less [output.css] [-compre Directory: cscript 
//nologo lessc.wsf inputdir outputdir [-compress]

(上面的这个步骤有时候 cmd 时会出现错误,打印不出来,可以略过)

这时关掉Sublime Text 3 再重新打开就可以在Sublime Text 3 中打开或者新建一个 less 文件,按下 Ctrl+S 保存,此时应该会在 less 文件的相同目录下生成同名的 css 文件。

代码演练:

来段代码试试吧:

@width:300px; 
@fonts:12px bold 'Source Code Pro', Menlo, Consolas, Monaco, monospace; 
.header{ color:#5c5c5c; .title{ font:@fonts; width:@width; } 
.content{ width:@width; height:300px; } } 
.footer{ font:@fonts; width:@width + 100px; }

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Sublime Text 3 之 Less2Css 插件 介绍和安装方法
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址