LESS 是一种动态样式语言，它扩展了 CSS，并在 CSS 的基础上增加了变量、函数、混合、嵌套等功能，方便前端开发人员编写可维护、易于扩展的样式代码。在 Atom 中编写 LESS 代码是一件非常方便的事情，它可以让你获得很好的开发体验和效率。
安装 LESS 插件
在开始之前，你需要在 Atom 中安装 LESS 插件，以便能够更好的支持 LESS 语言。打开 Atom 软件，点击左侧菜单栏上的“Atom”选项，选择“Preferences”，进入软件设置面板。在左侧菜单栏中选择“Install”，在搜索框中搜索“less”，找到“less-autocompile”插件并点击“Install”按钮进行安装。
安装完成后，在左侧菜单栏中会出现“Packages”选项，点击进入，找到“less-autocompile”插件并激活它。接下来，就可以愉快的开始编写 LESS 代码了。
编写 LESS 文件
在 Atom 中新建一个 LESS 文件，命名为“style.less”，然后输入以下代码：
-- -------------------- ---- ------- --------------- -------- ---- - ----------------- --------------- - -- - ------ ---------------------- ----- -
在这个例子中，我们定义了一个名为“@primary-color”的变量，并将其值设置为蓝色。在样式表中，我们使用了这个变量来设置背景色和标题的颜色。同时，我们还用了一个 LESS 内置函数“darken”来将标题颜色向这个颜色的深色方向偏移20%。
实时编译 LESS 文件
在编写 LESS 代码的过程中，我们需要将代码实时编译成 CSS 文件，以便在浏览器中进行预览。这时候，LESS 插件就派上用场了。
我们只需要对代码所在的目录进行监听，LESS 插件就会自动帮我们将 LESS 文件编译成 CSS 文件，并输出到相应的目录中。打开菜单栏中的“Packages”选项，选择“less-autocompile”插件，并选择“Toggle On/Off Autocompile”选项，这样插件就会开始监听相应的目录了。
总结
在 Atom 中编写 LESS 代码是一件非常便捷的事情。通过安装 LESS 插件，我们可以得到更好的语法高亮和智能提示；通过实时编译功能，我们可以更轻松地编写和调试 LESS 代码；同时，LESS 的特性也可以让我们更容易地编写高效、可维护的样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a7a8f4add4f0e0ff0ce5f2