命名空间
什么是命名空间？
将一些需要的混合组合在一起，可以通过嵌套多层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;
}