唯品秀前端博客
当前位置: 别具匠心 > Sublime Text 3的Less2Css插件介绍与安装

Sublime Text 3的Less2Css插件介绍与安装

2016-11-18 分类:别具匠心 作者:管理员 阅读(2138)

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

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

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

1
2
3
4
5
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文件。

来段代码试试吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@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;
}

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Sublime Text 3的Less2Css插件介绍与安装

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 231 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 846 条
  • 链接总数: 12 个
  • 标签总数: 416 个
  • 建站时间: 980 天
  • 注册用户: 1856 人
  • 访问总量: 8652744 次
  • 最近更新: 2019年8月22日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线