Sublime Text3 配置less保存自动编译-猿码集

1. Sublime Text3 简介

Sublime Text3是一款功能强大的高级文本编辑器，支持多种编程语言和文件格式。它拥有速度快、可定制性强、插件丰富的特点，深受程序员和网站开发人员的喜爱。本文将介绍Sublime Text3如何配置less保存自动编译。

2. 安装lessc

2.1 lessc 简介

LESS是一种动态样式语言，它使用类似CSS的语法，但提供了附加功能，如变量、混合、函数等。而lessc是一种将LESS编写的样式表编译成CSS样式表的工具。

2.2 安装lessc

在Windows系统下，安装lessc的最简单方法是通过npm(Node.js包管理器)进行安装。

npm install -g less

安装完成后，可以使用以下命令检查lessc是否成功安装。

lessc -v

3. Sublime Text3配置

3.1 安装Package Control

Package Control是Sublime Text3的插件管理器，它简化了插件的安装和管理。如果没有安装Package Control，需要首先安装。

在Sublime Text3中打开控制台(Ctrl + `)，将以下代码复制并粘贴到控制台中。

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =   sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),  'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

然后重启Sublime Text3。

3.2 安装LESS插件

在Sublime Text3中按下Ctrl + Shift + P，打开命令面板。在输入框中输入“install”，然后点击“Package Control: Install Package”。

在搜索框中输入“LESS”，然后选择LESS插件进行安装。

安装完成后，Sublime Text3会自动对.less文件进行语法高亮。

3.3 自动编译less文件

LESS插件可以自动编译.less文件，不需要在命令行下单独执行lessc命令。

在Sublime Text3中新建一个LESS文件，并将以下代码复制并粘贴进去。

@color: black;
body {
  color: @color;
}

保存文件后，Sublime Text3会自动将其编译成CSS文件。

如果不想手动保存文件来触发编译，可以按下Ctrl + Shift + B打开Build菜单，然后选择LESS进行编译。

3.4 配置自动编译

为了方便编写，我们可以配置Sublime Text3在保存LESS文件时自动编译为CSS文件。

在Sublime Text3打开用户设置和项目设置，分别对这两个文件进行配置。

打开用户设置并在其中添加以下代码：

{
  "auto_save": true,
  "build_systems": [
    {
      "name": "LESS Build",
      "cmd": ["lessc.cmd", "$file", "$file_path/css/$(file_name).css"],
      "selector": "source.less",
      "working_dir": "$file_path"
    }
  ]
}

在项目设置中添加以下代码：

{
  "auto_save": true,
  "build_systems":
  [
    {
      "name": "LESS Build",
      "cmd": ["lessc.cmd", "$file", "$file_path/css/$(file_name).css"],
      "selector": "source.less",
      "working_dir": "$file_path"
    }
  ]
}

配置完成后，保存LESS文件时Sublime Text3会自动编译为CSS文件。

4. 总结

本文介绍了Sublime Text3配置less保存自动编译的方法。首先需要安装lessc编译工具和LESS插件，然后可以通过手动编译和自动编译来进行LESS文件的编译。

为了方便编写，可以配置Sublime Text3在保存LESS文件时自动编译为CSS文件。

通过本文的介绍，相信读者已经了解了如何配置Sublime Text3的LESS环境，这对于使用LESS编写网页样式的开发者来说是非常实用的。

Sublime Text3 配置less保存自动编译