关于Sublime text 3如何编辑less并转(编译)成css文件
今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理。
1、在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为:
Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中install package(这里必须已经安装好了管理插件的package control插件),弹出新搜索框之后再输入要安装的插件,然后下拉出现对应插件,点击安装。
2、安装好插件后还不能编译,必须还要安装好Node.js才行
下载传送门:Node.js,必须保证系统中已经安装了nodejs并且路径已经添加到环境变量里面,一般安装好之后就已经自动添加到系统环境变量Path里,不过最好打开确认一下,打开方法:右键计算机->属性->环境变量->在系统变量里找到Path,然后选择下面的编辑按钮,里面的变量值就是
系统环境变量:
3、安装less
在cmd 下输入命令:npm install -g less,安装好之后在 Sublime 里面Ctrl+n新建less文件时,会有一个错误:LESS: Unable to interpret argument clean-css,这是因为还需要一个插件:less-plugin-clean-css插件的安装,同样在cmd下输入命令:npm install -g less-plugin-clean-css,安装好之后问题就解决了。
使用方法:在sublime中新建一个less文件,按Ctrl+s就会根据当前文件编译为一个css文件,这个新建的文件默认放在less文件同目录下,之后每次编辑完less文件之后Ctrl+s保存,同目录下的css文件也会同步更新内容。
好了,这样就可以开始在sublime上愉快的编辑less啦~
关于Sublime text 3如何编辑less并转(编译)成css文件的更多相关文章
- Sublime text 3如何编辑less并转(编译)成css文件
今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...
- Sublime Text 3(中文)添加Lua编译环境
Sublime Text 3(中文)添加Lua编译环境 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 没有 ...
- Sublime Text 3列编辑
Sublime Text 3 的列编辑方式如下 1.使用鼠标 (Ubuntu 14.04验证通过) 不同的平台要使用不同的鼠标按钮: 1.1 OS X 鼠标左键 + Option 或: 鼠标中键 添加 ...
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
- Sublime Text 3 实现C语言代码的编译和运行
Sublime Text 3 是一款优秀的代码编辑软件.界面简洁,轻巧快速,很受大家的欢迎. 最近开始用他来编辑数据结构的C语言代码,这就需要在新建编译系统.具体方法如下: 首先: 接下来是关键的一步 ...
- Sublime Text 2结合VS2010配置C C++编译
本文参考以下文章 特此谢谢 http://www.cnblogs.com/akira90/archive/2013/01/02/2842571.html 因遇到错误,浪费一个小时才解决 一.利用VS2 ...
- Sublime Text3中 less 自动编译成 css 的方法
使用sublime text的less2css插件 步骤: 1.安装node.js,这个到官网下载即可 2.安装less,方法:命令行输入: npm install -g less 3.sublime ...
- Sublime Less 自动编译成css
1.note编译 .下载notejs https://nodejs.org/en/ .首先你要安装lessc.我是用npm包管理器直接安装的,只需要一条命令,如下: npm install less ...
- sublime text 如何新建,删除,重命名等问文件的快速操作
引用自: stackoverflow 可以使用插件, Sidebar Enhancements, 按ctrl+shift+p 输入install package回车 搜索该插件后即可完成
随机推荐
- 【tmos】如何在Interceptor拦截器中注入其他数据
光是这样是获取不到weixinConfig内容的 public class WebLoginInterceptor implements HandlerInterceptor { @Autowired ...
- python 08
函数 函数定义: 你可以定义一个由自己想要功能的函数,以下是简单的规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号(). 任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于 ...
- 假设程序需要一个int类型的变量来保持你所有的音乐CD的数量
假设程序需要一个int类型的变量来保持你所有的音乐CD的数量.初始值为0为该变量编写一条声明语句 int numCDs = 0;
- ASP.NET - ADO.NET框架
ADO.NET(ActiveX Data Objects) ADO.NET是一个COM组件库,用于在使用Microsoft技术的代码中访问数据库. SQL数据操作类 SqlConnection类(Sy ...
- Aizu - 2249 Road Construction
题目:给出若干个建筑之间的一些路,每条路都有对应的长度和需要的花费,问在保证源点1到其他个点的距离最短的情况下,最少的花费是多少/ 思路:和一般的最短路问题相比,多了一个 数组id[i],用来记录到达 ...
- 使用WireMock快速伪造RESTful服务
⒈下载WireMock独立运行程序 http://wiremock.org/docs/running-standalone/ ⒉运行 java -jar wiremock-standalone-2.2 ...
- Java基础5-接口
昨日内容回顾 jvm参数设置 -Xmx //设置最大堆大小 java -Xmx512m Classname -Xms //设置初始堆大小 java -Xms24m Classname -Xss //设 ...
- dubbo源码分析12——服务暴露3_doExportUrls()方法分析
本文紧接上文,doExportUrls()方法位于ServiceConfig类中,代码入口如下: private void doExportUrls() { List<URL> regis ...
- Libevent源码分析系列【转】
转自:https://www.cnblogs.com/zxiner/p/6919021.html 1.使用libevent库 源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了 ...
- ES6学习笔记七Generator、Decorators
Generator异步处理 { // genertaor基本定义,next()一步步执行 let tell=function* (){ yield 'a'; yield 'b'; return 'c' ...