软件教程

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

时间:01-13   作者:YDW   来源:YDW.ORG   阅读:126  
内容摘要:搜索less按Enter就可以了,或者到这里下载,安装成功后,重启.js-到本地目录。然后把目录地址加入到环境变量PATH的中,如D:\less.调出运行窗口,输入cmd,在命令行中输入lessc,如果有如下提示则表示设置成功:3中打开或者新建一个less文件,按下Ctrl+S保存,此时应该会在less文件的相同目录下生成同名的css文件。

云端网 - www.ydw.org

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

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

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

设置好之后,通过快捷键 徽标键+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时会出现错误,打印不出来,可以略过)

这时关掉 Text 3再重新打开就可以在 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; }

原文链接:

(云端网 )

www.ydw.org - 云端网


标签:less2Css  插件  

  777777  666666