Less命名空间和作用域（6）

命名空间

什么是命名空间？
将一些需要的混合组合在一起，可以通过嵌套多层id或者class来实现。

例子：
less编写

#bgcolor(){
	background:#ffffff;
	.a{
		color:#888888;
		&:hover{
			color:#ff6600;
		}
		.b{
			background:#ff0000;
		}
	}
}
.bgcolor1{
	background:#fdfee0;
	// 相当于把.a里面的内容copy到这里
	#bgcolor>.a;
}
.bgcolor2{
	#bgcolor>.a>.b;
}

编译结果

.bgcolor1{
	background:#fdfee0;
	color:#888888;
}
.bgcolor1:hover{
	color:#ff6600;
}
.bgcolor1 .b{
	background:#ff0000;
}

.bgcolor2{
	background:#ff0000;
}

省略 > 的写法
例子：
less编写

#bgcolor(){
	background:#ffffff;
	.a{
		color:#888888;
		&:hover{
			color:#ff6600;
		}
		.b{
			background:#ff0000;
		}
	}
}
.bgcolor1{
	background:#fdfee0;
	// 相当于把.a里面的内容copy到这里
	#bgcolor .a;
}
.bgcolor2{
	#bgcolor .a .b;
}

编译结果

.bgcolor1{
	background:#fdfee0;
	color:#888888;
}
.bgcolor1:hover{
	color:#ff6600;
}
.bgcolor1 .b{
	background:#ff0000;
}

.bgcolor2{
	background:#ff0000;
}

作用域

Less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。

例子：
less编写

@clolor:#ffffff;

.bgcolor{
	width:50px;
	a{
		color:@clolor;
	}
	@clolor:#ff0000;
}

编译结果

.bgcolor{
	width:50px;
}
.bgcolor a{
	color:#ff0000;
}