首先新建一个文件：example.less，less格式文件的语法和css文件格式一样，只要你有css基础，你就能很快地掌握less。

设置变量（variables）

设置变量（variables）功能和JavaScript文件中设置变量的形式差不多，一次设置，就可以重复使用。在新建的example.less输入如下代码：

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

经过编译后就能产生一个example.css文件，其内容如下：

#header {
  color: #4D926F;
}

h2 {
  color: #4D926F;
}

样式#header和h2中引用的@brand_color值已经变成了#4D926F，有点意思了吧，别急，接着往下看。

引用（mixins）

引用（mixins）功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容：

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

经过编译后产生的css文件内容如下：

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

在less文件里，样式#header和#footer里所引用的.rounded_corners语句会自动变成样式.rounded_corners里所有的css语句。

嵌套（nested）

嵌套（nested）功能可以加强管理css样式的层级关系，让css样式之间的关系更加清晰明了。比如你想写一个class值为logo的元素样式，而这个元素的一个祖元素的ID值为header，你可能会这样写这个样式的名称：#header .logo。现在不必了，你可以直接把.logo样式写在#header样式里，如下：

#header {
  color: black;
  .navigation {
    font-size: 12px;
    }
  .logo {
    width: 300px;
  }
}

经过编译后产生的css文件内容如下：

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

有没有觉得这样管理css文件更加方便清晰？

运算（operations）

运算（operations）功能可以让你对css中的长宽值、颜色值等数值进行加减乘除运算，如有下less文件内容：

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer {
  color: @base-color + #111;
}

经过编译后就能产生的css文件内容如下：

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}

#footer {
  color: #222;
}

看完了这些有没有觉得Less的强大，如果你觉得她对你有用的话就好好利用吧，安装步骤可以看这里。不过Less需要有Ruby的支持，所以你想利用她必须先配置好Ruby环境，她的更多使用方法请查看Less官方网站。

首先下载Ruby的安装文件，可以到这里下载，建议选择“一步安装”程序。安装过程非常简单，和普通安装程序过程无异，但可以留心下安装组件步骤：

可以把里面Scite和Enable RubyGems两个选项去掉。Scite是一个文本编辑器，我一直用这个编辑器，功能很强大（嘿嘿，忍不住又夸奖几句），但Ruby的这个版本是面向于Ruby配置的，而我有很多种文件类型要编辑，所以我选用Scite官方发布的版本。

Ruby自带的RubyGems的版本太低，还要从RubyGems官方网站上下载，最好下载最新的版本。把下载下的压缩包解压，如我把它解压到了E:\rubygems目录下，然后打开命令窗口，输入如下命令：

E:
cd rubygems
ruby setup.rb

如图所示：

安装成功后会的界面：

安装好了Ruby和RubyGems可以安装Less了，到这里下载安装文件，然后解压。我把它解压到了E:\less目录下。打开命令行窗口，输入如下命令：

E:
cd less\lib
gem install less

如图所示：

安装成功后会的界面：

下面开始编写Less文件了。例如我在E:\lessExample目录下新建一个文件，文件全称为example.less，输入如下代码：

/* LESS */

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

打开命令行窗口，输入如下命令：

E:
cd lessExample
lessc example.less

运行完后如果你在E:\lessExample目录下发现产生了一个新文件：example.css，打开后其代码应该如下：

#header { color: #4D926F; }
h2 { color: #4D926F; }

这样就表明Less已经安装好了，你接下来的任务就是感受它的强大与灵活。