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