less的基本使用

less作为css的一种形式的扩展，在现有的CSS语法 上，添加了很多额外的功能。

变量

在less中利用＠符号进行变量的定义

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

混合

在less中我们可以定义一些通用的属性集为class，然后在另一个class中去调用这些属性，下面有这样一个class

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

在任何class中像下面这样调用就可以

#menu a {
 color: #111;
 .bordered;
}
.post a {
 color: red;
 .bordered;
}

带参数混合

在less中，还可以像函数一样定义一个带参数的属性集合。

.border-radius (@radius) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

然后在其他class中像这样调用它

#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px); 
}

给参数设置默认值

.border-radius (@radius: 5px) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

@arguments变量
@arguments包含了所有传递进来的参数，如果不想单独处理每一个参数的话，可以这样写：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
 box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

模式匹配和导引表达式

模式匹配是根据 值和参数匹配。

.mixin (@a) {
 color: @a;
}
.mixin (@a, @b) {
 color: fade(@a, @b);
}

导引表达式比较像函数式编程，为了尽可能的保留css的可声明性，Less通过导引而非if/else语句 实现条件判断 ，因为前者已在@media query特性中被定义 。
when 关键字用来定义 一个导引序列 。

.mixin (@a) when (lightness(@a) >= 50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}

导引 中可用全部比较运算符，除去关键字true以外的值都被视为假。
导引可以无参数，也可以对参数进行比较运算。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

基于值的类型进行匹配，可以使用is*函数 。

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

导引 中and 实现与，or实现或。

嵌套规则

#header {
 color: black;
 	.navigation {
 	 	font-size: 12px;
	}
 	.logo {
  		width: 300px;
  		&:hover { text-decoration: none }
	}
}

想写串联选择器，而不是后代选择器，就可以使用＆，这点对伪类尤其有用