使用 Sublime Text 编写 LESS
LESS 是一种 CSS 预处理器，它可以极大地增强 CSS 的功能，使之具备变量、嵌套、Mixin、函数等编程语言的特性，让样式编写更加高效、简洁。LESS 编写起来相对于 CSS 来说更加易于维护和开发，越来越多的前端开发者开始使用 LESS 作为他们的样式预处理器。
本篇文章将会介绍如何在 Sublime Text 中编写 LESS，通过 Sublime Text 的插件和配置，能够让开发者更轻松地使用 LESS 语言，大大提高开发效率。
一、Sublime Text 中安装 LESS 插件
首先，在 Sublime Text 中安装 LESS 插件非常简单，我们只需要按下 Ctrl+Shift+P 组合键，然后在命令指令面板中输入 install package 选项，再选择 LESS，就能够安装 LESS 插件了。
安装完成后，我们可以打开任意一个以 .less 为扩展名的文件， Sublime Text 会自动识别该文件是 LESS 文件，并开启 LESS 的语法高亮显示。
二、Sublime Text 中配置 LESS 编译插件
虽然 LESS 插件让我们编写 LESS 文件成为可能，但是我们需要将 LESS 文件编译成为标准的 CSS 文件才能够执行。LESS 编译也有很多种方式， 它可以通过使用命令行工具、脚本或者插件来实现，本文介绍的是在 Sublime Text 中使用 LESS 编译插件来编译 LESS 文件。
在 Sublime Text 中有很多插件可以帮助我们完成 LESS 编译的工作，其中比较流行的插件是 LESS2CSS 和 Less2css-on-save。在这里我们介绍前者的用法：
1.使用 Ctrl+Shift+P 组合键打开命令指令面板，输入 Package Control: Install Package，找到 LESS2CSS 安装并重启 Sublime Text。
2.在编辑器的菜单栏中选择 Preferences -> Package Settings -> LESS2CSS -> Settings - Default 即打开了 LESS2CSS 的默认配置文件。
3.在打开的配置文件中，我们需要修改两个重要的配置项：less_exe_path 和 css_save_path。 其中 less_exe_path 是 LESS 编译器的绝对路径，一般情况下我们只需要设置为 "lessc" 即可。css_save_path 是保存编译完的 CSS 文件路径，这里我们可以设置为当前 LESS 文件所在文件夹，即 ${file_path}，这样 LESS 插件会在原有 LESS 文件的目录下生成编译后的 CSS 文件。
修改后的配置文件应该长这样：
{ "less_exe_path": "lessc", "css_save_path": "${file_path}" }
4.使用快捷键 Ctrl+Shift+B 进行 LESS 编译，或者右键单击编辑器中的 LESS 文件，在菜单中选择 LESS2CSS -> Compile LESS。经过编译后，我们可以在同一目录下找到同名 CSS 文件。
三、Sublime Text 中使用 LESS 插件的优势
Sublime Text 是一个非常流行的文本编辑器，它有很多的插件和扩展功能，使得开发者可以更加高效地进行开发。使用 LESS 插件之后，我们可以更加轻松地实现以下优势：
语法高亮和智能提示 LESS 插件会为我们提供丰富的语法高亮和智能提示功能，在编辑 LESS 文件时，我们无需担心语法或者语义的错误。
变量和嵌套使用 LESS 的特性非常适合开发中大量使用到的变量和嵌套，使得我们的代码更加简洁，易于维护。
Mixin 和函数的使用 通过 LESS 的 Mixin 和函数的使用，我们可以更加方便地重用代码，减少开发的代码量，代码复用率更高。
四、示例代码
下面是一个简单的 LESS 示例代码：
@bg-color: #000000;
#container { font-size: 16px; .header { background: @bg-color; color: white; padding: 10px; } .content { margin-top: 20px; .article { border: 1px solid @bg-color; padding: 10px; } } }
通过这个 LESS 示例代码，我们可以看到 LESS 嵌套和变量的使用方式，它使得代码更加美观、可读性更高。通过 Sublime Text 插件的支持，我们可以编写更加高效和易于维护的 LESS 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9e544e46428fe9e1c13a1
