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啦~

时间: 2024-10-11 22:27:52

Sublime text 3如何编辑less并转(编译)成css文件的相关文章

Windows中通过快捷键使用Sublime Text的列编辑模式

在Windows中要想使用Sublime Text的列编辑模式,我们可以通过下面的方式进行: Shift+鼠标右键 鼠标中键 虽然通过两种方式都能打开列编辑模式,但是操作略显复杂,其实我们可以利用Sublime Text内置的快捷键以及快捷键的自定义等方式来解决,下面我介绍两种方法: 方法一: Sublime Text里默认配置了如下的快捷键来进行行选择, 继续阅读>>

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

Sublime Text 3是一款优秀的代码编辑软件.界面简洁,轻巧快速,很受大家的欢迎. 最近开始用他来编辑数据结构的代码,这就需要在新建编译系统.具体方法如下: 首先: 接下来是关键的一步,将以下代码粘贴到弹出的编辑页面中,文件名为name.sublime-build形式,name是新建的编译器名字. 1 { 2 "cmd": ["gcc","${file}","-fexec-charset=gbk","-o&q

Sublime Less 自动编译成css

1.note编译 1.下载notejs https://nodejs.org/en/ 2.首先你要安装lessc.我是用npm包管理器直接安装的,只需要一条命令,如下: npm install less -g 3.检查lessc是不是安装成功了: lessc -v 在 cmd中可以手动编译 然后可以手动编译less文件为css (f:\WorkFiles\天津欢乐谷\style\alan.less) 进入目录 :cd f:\WorkFiles\天津欢乐谷\style lessc alan.les

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

本文参考以下文章 特此谢谢 http://www.cnblogs.com/akira90/archive/2013/01/02/2842571.html 因遇到错误,浪费一个小时才解决 一.利用VS2010搭建命令行编译环境 台式PC,WIN7系统 + VS2010 1. 在“环境变量”里面创建三个系统变量 在命令行输入set命令会有对应的VS信息,vs2010是VS100COMNTOOLS <1>名字: VS100Common 值: C:\Program Files\Microsoft Vi

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

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

Sublime Text 3 全程详细图文原创教程(持续更新中。。。)

一. 前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知.最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎.片面,不够系统和全面,所以一路走来,耗费了本人大量的时间和精力.所以蒙生了写这篇<Sublime Text 3 全程详细指南>,一来对自己的经验是一个总结,二来可以给初学者做个系统.全面的指引,让他们少走我当时走过的弯路,从而能快速地掌握Sublime Text这个优秀的编辑器. 目前我正在使用的版本是Subl

Sublime Text 全程指南

安装(Installation) Sublime Text 官方网站 提供了Sublime Text各系统各版本的下载,目前Sublime Text的最新版本是 Sublime Text 3 .这里以Windows版本的Sublime Text安装为例. 注意在安装时勾选 Add to explorer context menu ,这样在右键单击文件时就可以直接使用Sublime Text打开. 添加Sublime Text到环境变量 使用 Win + R 运行 sysdm.cpl 打开"系统属

翻译:打造基于Sublime Text 3的全能python开发环境

原文地址:https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/ 原文标题:Setting Up Sublime Text 3 for Full Stack Python Development 翻译:打造基于sublime text 3的全能Python开发环境 Sublime Text 3 (ST3) is lightweight, cross-platfo

转:Sublime Text 2 实用快捷键[Mac OS X]

转: http://lucifr.com/2011/09/10/sublime-text-2-useful-shortcuts/ Sublime Text 2 实用快捷键[Mac OS X] lucasfais 总结了一些非常实用的 Sublime Text 2 快捷键,Lucifr 将它们翻译成了中文,以方便查阅. 注意:修饰键(如?)后跟多个按键的情况表示在按住修饰键的情况下依次按下相应键. 打开/前往 ?T 前往文件 ??P 前往项目 ?R 前往 method ??P 命令提示 ?G 前往