热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Sublimetext3如何编辑less并转(编译)成css文件

今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理。1、在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件

今天开始学习使用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,然后选择下面的编辑按钮,里面的变量值就是

系统环境变量:

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

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 + LiveReload + Chrome
    安装LiveReload在SublimeText3中安装LiveReload。macOS快捷键⌘+⇧+P,输入InstallPackage,搜索LiveReload并回车安装。(W ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 快速掌握Sublime Text3的使用方法,怎么汉化编辑器
    自动完成且反应快速的编辑器软件(关闭时是什么界面,打开时仍是什么界面,但需要手动保存文件,很经典)怎样将SublimeText3汉化:1、打开软件2、安装对应的插件即可,按ctrl ... [详细]
  • 本文详细介绍了如何通过命令行工具修改Windows系统中文件扩展名与其对应文件类型的关联,特别针对快捷方式(.lnk)文件进行了示例说明。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • Sublime Text通过快捷键在浏览器中预览文件
    2019独角兽企业重金招聘Python工程师标准首先说下,我的是SublimeText3,win10。ST有个插件ViewInBrowser可以在 ... [详细]
  • VS Code 中 .vscode 文件夹配置详解
    本文介绍了 VS Code 中 .vscode 文件夹下的配置文件及其作用,包括常用的预定义变量和三个关键配置文件:launch.json、tasks.json 和 c_cpp_properties.json。 ... [详细]
  • 设计模式系列-原型模式
    一、上篇回顾上篇创建者模式中,我们主要讲述了创建者的几类实现方案,和创建者模式的应用的场景和特点,创建者模式适合创建复杂的对象,并且这些对象的每个组成部分的详细创建步骤可以是动态的变化的,但 ... [详细]
  • MVC框架下使用DataGrid实现时间筛选与枚举填充
    本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能,具体包括使用jQuery UI的DatePicker插件添加时间筛选条件,并通过枚举数据填充下拉列表。 ... [详细]
  • 本文详细介绍了在 Windows 7 上安装和配置 PHP 5.4 的 Memcached 分布式缓存系统的方法,旨在减少数据库的频繁访问,提高应用程序的响应速度。 ... [详细]
  • 解决远程桌面连接时的身份验证错误问题
    本文介绍了如何解决在尝试远程访问服务器时遇到的身份验证错误,特别是当系统提示‘要求的函数不受支持’时的具体解决步骤。通过调整Windows注册表设置,您可以轻松解决这一常见问题。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • protobuf 使用心得:解析与编码陷阱
    本文记录了一次在广告系统中使用protobuf进行数据交换时遇到的问题及其解决过程。通过这次经历,我们将探讨protobuf的特性和编码机制,帮助开发者避免类似的陷阱。 ... [详细]
author-avatar
手机用户2602930391
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有