Less 简介
简单来说，Less 就是让你在网页设计的时候，可以更方便地写 CSS 的工具。
Less官网的说明：
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算，函数.
LESS 既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，
也可以借助Node.js或者Rhino在服务端运行。
也就是说，你可以透过 Less 的语法使用 变量, 继承, 运算 和函数 这些工具，
再通过编译之后，less 就可以转成一般的 CSS，
于是让设计 CSS 这件事可以更加地有弹性。
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
编译出来的 CSS:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
=====================================
混合
mixins让你可以重覆利用某些样式的宣告，
你可以在 A 样式里面包括另一个 B class,
所有被 B class 的样式都会被嵌入进来 A 这个样式设定。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
那如果我们现在需要在其他class中引入那些通用的属性集，
那么我们只需要在任何class中像下面这样调用就可以了:
#menu a { color: #111; .bordered; }
下面是转出来的 CSS:
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }
===========================================
带参数混合
这个最好用的地方就是在简化一些比较不好写的 css, 例如 CSS3 的圆角设定，
目前因为浏览器的语法尚未统一，你需要写:
通过Less, 你只要写：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
=======================================
less 提供的主要功能
arguments 变量
@arguments包含了所有传递进来的参数。
例如 CSS3 的阴影设定:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
#nav{
.box-shadow(2px, 5px);
}
#nav{
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
}
===============================
函数 & 运算
通常在设计 button 或是 border 的样式的时候，我们常常会需要一个
跟原本差不多的颜色。可能是亮一点点、暗一点点、或是鲜艳一点点
（例如：当做 button 一般的颜色、hover 上去的颜色, 点下去的颜色）。
而这样的东西，传统上我们是用 RGB 在调色盘上设好再设到 CSS 里，
但如果你对 HSB （色相、明亮度、饱和度）有那麽一点直觉的话，
Less 里面也可以让你直接用 function 来设定，
而输出来的 css，就会自动帮你算好相对应的 RGB 。例如：
// LESS
@base-color: #111;
@red: #842210;
#footer {
color: @base-color + #003300;
// 饱和度降低 10%
border-color: desaturate(@red, 10%);
}
转换之后css
#footer {
color: #114411;
border-color: #7d2717;
}
======================================
模式匹配和导引表达式
有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：
// LESS
.mixin (dark, @color) {
//亮度降低 10%
color: darken(@color, 10%);
}
.mixin (light, @color) {
//亮度增加 10%
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
运用到class上
.class {
.mixin(light, #888);
}
转换之后css
.class {
color: #a2a2a2;
display: block;
}
==============================================
具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值
只有被匹配的混合才会被使用。变量可以匹配任意的传入值，
而变量以外的固定值就仅仅匹配与其相等的传入值。
导引
//lightness(@a) 从颜色值中提取 ‘lightness‘ 值（亮度）
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。