less开发指南

【一】LESS的简介

LESS，以.less为后缀名的文件，融入了一套自定义的语法和一个强大的器。通过这些语法，我们可以定义自己的样式规则，而这些规则经过器的处理，最终会编译生成我们熟悉的CSS文件。LESS并非要裁剪或取代CSS，相反，它是在现有的CSS语法基础上，加入了程序式语言的特性，如变量、继承、运算和嵌套等，从而使得CSS的编写和维护更加便捷。

让我们通过一个LESS代码片段来感受它的魅力：

```less

@url: '../images/';

.box-a {

.hd-a {

height: 25px;

background: url('@{url}bg.png');

}

}

```

这段LESS代码，经过编译后，会生成如下的CSS代码：

```css

.box-a .hd-a {

height: 25px;

background: url('../images/bg.png');

}

```

在前端页面开发时，我们依然引入css文件地址，而less文件则是你维护的代码文件。使用LESS，我们只需在原有基础上增加一个编译的步骤。

【二】编译方案的新视角

目前存在许多能将LESS编译为CSS的插件或软件，如gruntjs、nodejs等。在这里，我们将介绍一款名为考拉的编译软件。

使用考拉软件，你只需要打开软件，将.less文件拖进去。当你在编辑器中保存less文件时（考拉支持实时监控编译），考拉会在默认目录下生成一份同名的css文件（你可以自定义输出路径）。

【三】如何在编辑器中享受LESS的代码补全提示

以Sublime Text编辑器为例，你需要安装XXX（具体插件名称）。安装后重启编辑器，你现在可以在编写LESS代码时享受到代码补全提示的便利。

【四】版本知识详解

当我们谈论LESS的版本时，我们并不是指LESS本身（如jQuery需要下载对应的版本库），而是指编译工具中的less版本。以考拉软件为例：

在考拉软件的设置或关于界面中，你可以查看到一个数字版本标识，如“1.6.1”，这就是考拉软件中集成的LESS版本。随着技术的不断进步，新的版本可能会带来更多功能和性能的优化。了解并适时更新你的编译工具版本，是保持工作效率的好方法。