今天开始学习使用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文件的更多相关文章

  1. Sublime text 3如何编辑less并转(编译)成css文件

    今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...

  2. Sublime Text 3(中文)添加Lua编译环境

    Sublime Text 3(中文)添加Lua编译环境 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 没有 ...

  3. Sublime Text 3列编辑

    Sublime Text 3 的列编辑方式如下 1.使用鼠标 (Ubuntu 14.04验证通过) 不同的平台要使用不同的鼠标按钮: 1.1 OS X 鼠标左键 + Option 或: 鼠标中键 添加 ...

  4. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  5. Sublime Text 3 实现C语言代码的编译和运行

    Sublime Text 3 是一款优秀的代码编辑软件.界面简洁,轻巧快速,很受大家的欢迎. 最近开始用他来编辑数据结构的C语言代码,这就需要在新建编译系统.具体方法如下: 首先: 接下来是关键的一步 ...

  6. Sublime Text 2结合VS2010配置C C++编译

    本文参考以下文章 特此谢谢 http://www.cnblogs.com/akira90/archive/2013/01/02/2842571.html 因遇到错误,浪费一个小时才解决 一.利用VS2 ...

  7. Sublime Text3中 less 自动编译成 css 的方法

    使用sublime text的less2css插件 步骤: 1.安装node.js,这个到官网下载即可 2.安装less,方法:命令行输入: npm install -g less 3.sublime ...

  8. Sublime Less 自动编译成css

    1.note编译 .下载notejs https://nodejs.org/en/ .首先你要安装lessc.我是用npm包管理器直接安装的,只需要一条命令,如下: npm install less ...

  9. sublime text 如何新建,删除,重命名等问文件的快速操作

    引用自: stackoverflow 可以使用插件, Sidebar Enhancements, 按ctrl+shift+p 输入install package回车 搜索该插件后即可完成

随机推荐

  1. [C++]Linux之多进程运行代码框架

    声明:如需引用或者摘抄本博文源码或者其文章的,请在显著处注明,来源于本博文/作者,以示尊重劳动成果,助力开源精神.也欢迎大家一起探讨,交流,以共同进步- 0.0  多进程代码框架示例 /* @url: ...

  2. 怎么从docker 内部去连接host 上的mysql

    一般来说数据最好放在一个公共的地方,这样在多个docker 可以共享这些数据. 这篇文章就是讲怎么从docker 内部去连接host上的 mysql 数据库. 因为我的host 有public ip, ...

  3. Ubuntu18.04+GTX1080Ti+CUDA9.0+cuDNN7.0+TensorFlow-GPU1.9环境搭建【2018年11月配置成功】

    注:下面的的驱动版本不要安装最新(默认)的版本,因为会遇到各种问题,将会浪费你的大量时间.(当然大神无视) 环境 系统:Ubuntu 18.04 LTS 显卡:GTX1080Ti CUDA:9.0 c ...

  4. call,apply,bind——js权威指南函数属性和方法章节读书笔记

    每个函数(即这两个方法是函数的方法)都包含两个非继承而来的方法: apply()和 call().参数明确,使用call.参数不明确,使用apply,可以遍历数组参数 1,call里面的参数是散开的, ...

  5. HashSet去除List重复元素

    使用Hashset 去重复 例一,List<String> 去重复 public class main { public static void main(String[] args) { ...

  6. pycharm 使用教程

    本文为大家讲解的是pycharm 的安装和首次使用,PyCharm 是我用过的python编辑器中,比较顺手的一个.而且可以跨平台,在macos和windows下面都可以用,这点比较好.感兴趣的同学参 ...

  7. Tesseract识别图片提取文字&字库训练

    文中测试了3.0和4.0两个版本.发现3.0识别效率不准确,需要训练词库.4.0识别效率就比较高了,而且支持结果生成pdf.txt等格式.所以推荐使用4.0版本. 这个工具可以用在爬虫的时候获取验证码 ...

  8. Intel Xeon E5-2620 v4参数

    基本参数 CPU系列 Xeon E5 v4系列 制作工艺 14纳米 核心代号 Broadwell 性能参数 核心数量 八核心 线程数量 十六线程 CPU主频 2.1GHz 动态加速频率 3GHz L3 ...

  9. mac环境下支持PHP调试工具xdebug,phpstorm监听

    先让php支持xdebug 方式一: https://xdebug.org/download.php 下载相应的xdebug  可以到http://xdebug.org/wizard.php 把php ...

  10. [Docker]CentOS7通过rpm包安装Docker

    前几天写过一篇文章:[Docker]CentOS7下Docker安装教程,直接使用yum命令下载Docker即可.但是前提是你需要***,所以这篇文章来讲讲,如果不会***,该如何安装Docker. ...