LESS详解之混合(Mixins)高级

　　现在已经为大家介绍了LESS之混合(Mixins)的一些用法了，相信大家也用了不少有关LESS之混合(Mixins)了。接下来将为大家介绍一些有关LESS之混合(Mixins)的另外一些使用方法，可算是比较难理解的，所以把它们放到了LESS详解之混合(Mixins)高级来为大家介绍，希望能个能对大家有所帮助。

　　高级参数用法

　　如果需要在 mixin 中不限制参数的数量，可以在变量名后添加“...”，表示这里可以使用 N 个参数。小例子如下

　　LESS代码

/*接受 0-N 个参数*/
.mixin1 (...) {  
	padding:@arguments;
}
div {
	.mixin1(20px);
	div {
		.mixin1(20px 30px);
		div {
			.mixin1(20px 50px 203px);
			div {
				.mixin1(20px 4px 4px 8px);
			}
		}
	}
}

/*不接受任何参数*/
.mixin2 () { 
	height : 131px;
}     
span {
	.mixin2;
}

/*接受 0-1 个参数*/ 
.mixin3 (@a: #fff) { 
	color : @a;
}
h1 {
	.mixin3;
	h2 {
		.mixin3(#eee);
	}
}
/*接受 0-N 个参数*/    
.mixin4 (@a: 1, ...) {
	margin : @arguments;
}
a {
	.mixin4;
	span {
		.mixin4(32%,223em,231px,111px);
	}
}
/*接受 1-N 个参数*/ 
.mixin5 (@a, ...) {  
	margin : @arguments;
}
.meng {
	.mixin5(90px);
	span {
		.mixin5(32%,223em,231px,111px);
	}
}

　　编译后的CSS代码

/*接受 0-N 个参数*/
div {
  padding: 20px;
}
div div {
  padding: 20px 30px;
}
div div div {
  padding: 20px 50px 203px;
}
div div div div {
  padding: 20px 4px 4px 8px;
}
/*不接受任何参数*/
span {
  height: 131px;
}
/*接受 0-1 个参数*/h1 {
  color: #ffffff;
}
h1 h2 {
  color: #eeeeee;
}
/*接受 0-N 个参数*/a {
  margin: 1;
}
a span {
  margin: 32% 223em 231px 111px;
}
/*接受 1-N 个参数*/.meng {
  margin: 90px;
}
.meng span {
  margin: 32% 223em 231px 111px;
}

　　模式匹配与Guard表达式

　　LESS 提供了通过参数值控制 mixin 行为的功能。如果要根据 @switch 的值控制 .mixin 行为，只需按照下面的方法定义。小例子如下

　　LESS代码

.mixin (dark, @color) {
    color: darken(@color, 10%);
}
.mixin (light, @color) {
    color: lighten(@color, 10%);
}
.mixin (@_, @color) {
    display: block;
}

@switch: light;

.long {
    .mixin(@switch, #888);
}

@switch2 : dark;
.meng {
	.mixin(@switch, #666);
}

　　编译后的CSS代码

.long {
  color: #a2a2a2;
  display: block;
}
.meng {
  color: #808080;
  display: block;
}

　　传给 .mixin 的颜色将执行 lighten 函数，如果 @switch 的值是 dark，那么则会执行 darken 函数输出颜色。

        darken(@color, 10%)函数的意思是 亮度降低 10%。lighten(@color, 10%)函数的意思是 亮度增加 10%

　　以下是整个过程如何发生的：

　　第一个 .mixin 没有匹配，因为不满足 dark 条件;

　　第二个 .mixin 可以被匹配，因为它满足了 light 条件;

　　第三个 .mixin 也可以被匹配，因为它接受任何参数。

　　只有满足匹配要求的混合才会被使用。混合中的变量可以匹配任何值，非变量形式的值只有与传入的值完全相等时才可以匹配成功。

　　我们也可以根据参数的数量进行匹配，小例子如下

　　LESS代码

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

.meng {
    .mixin(#000);
}
.long {
    .mixin(#fff, 10%);
}

　　编译后的CSS代码

.meng {
  color: #000000;
}
.long {
  color: rgba(255, 255, 255, 0.1);
}

　　调用 .mixin 时，如果使用了一个参数，输出第一个 .mixin，使用了两个参数，则输出第二个。fade(@color, 10%)的意思是设定透明度为 10%。

　　条件混合(guarded mixins)

　　与上面匹配值或者匹配参数数量的情况不同，Guards 被用来匹配表达式 (expressions)。如果你很熟悉编程函数的用法，那么很可能你已经掌握它的用法了。

　　为了尽可能地符合 CSS 的语言结构，LESS 选择使用 guard混合(guarded mixins)(类似于 @media 的工作方式)执行条件判断，而不是加入 if/else 声明。

　　

       通过LESS自带的函数判断

　　LESS代码

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

.meng { 
	.mixin(#ddd); 
}
.long { 
	.mixin(#555);
}

　　编译后的CSS代码

.meng {
  background-color: black;
  color: #dddddd;
}
.long {
  background-color: white;
  color: #555555;
}

　　运算符判断

    

        Guards 支持的运算符包括：> >= = =< <。说明一下，true关键字是唯一被判断为真的值，也就是这两个混合是相等的。小例子如下

　　LESS代码

@IE : true;
@w : 10;

.IE (@bTure) when (@bTure){
    *display:block;
}
.IE1 (@bTure) when (@bTure){
    *margin:0;
}
.IE2 (@bTure) when (@bTure >=0){
    *padding:@bTure;
}
.IE3 (@bTure) when (@bTure >0){
    *height:20px;
}

div {
    .IE(@IE);
    .IE1(@IE);
    .IE2(@w);
    .IE3(@w);
}

　　编译后的CSS代码

div {
  *display: block;
  *margin: 0;
  *padding: 10;
  *height: 20px;
}

　　多个条件

        多个Guards可以通过逗号表示分隔，如果其中任意一个结果为 true，则匹配成功。这个相当于脚本中的或的意思。小例子如下

　　LESS代码

@IE : true;
@w : 10;

.IE (@bTure, @b) when (@bTure), (@b < -10){
    *display:block;
}
.IE1 (@bTure, @b) when (@bTure = false), (@b < -10){
    *width:20px;
}
.IE2 (@bTure, @b) when (@bTure = true), (@b < -10){
    *height:20px;
}

div {
    .IE(@IE, @w);
    .IE1(@IE, @w);
    .IE2(@IE, @w);
}

　　编译后的CSS代码

div {
  *display: block;
  *height: 20px;
}

　　参数之间比较

　　参数之值得注意的是不同的参数之间也可以比较，而参与比较的也可以一个参数都没有间判断。小例子如下

　　LESS代码

@h : 20;
@w : 10;

.mixin (@h, @w) when (@h < @w){
	width:@h;
}
.mixin1 (@h, @w) when (@h > @w){
	height:@w;
}

div {
	.mixin(@h, @w);
	.mixin1(@h, @w);
}

　　编译后的CSS代码

div {
  height: 10;
}

　　guard 中的and

　　LESS代码

@h : 20;
@w : 10;
@true : true;

.mixin (@h, @w) when (@h > @w) and (@true) {
	width:@h;
}

div {
	.mixin(@h, @w);
}

　　编译后的CSS代码

div {
  width: 20;
}

　　guard 中的not

　　LESS代码

@h : 20;

.mixin (@h) when not(@h < 0) {
	width:@h;
}

div {
	.mixin(@h);
}

　　编译后的CSS代码

div {
  width: 20;
}

　　上面就是今天为大家介绍的有关LESS详解之混合(Mixins)高级的相关内容，主要为大家介绍了高级参数用法、模式匹配与Guard表达式和条件混合(guarded mixins)。希望能为大家在LESS的学习道路上有所帮助。