大家一起学习less 3：命名空间

这其实是“嵌套规则”的升级版。

我们先看官网例子吧：

//LESS
//这里是命名空间的定义,里面包含一个button方法
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
}
//这里是具体调用，通过XXX > YYY方式进行调用，本人觉得用 -〉更可靠，起码长得不像亲子选择器
#header a {
  color: orange;
  #bundle > .button;
}

/* 生成的 CSS */
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: #ffffff;
} 

上面的命名空间定义，不要以为只有ID选择器才可以，任何合法选择器也行，如

//LESS
//模块名改为类了
.bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
}
#header a {
  color: orange;
  .bundle > .button;
}

/* 生成的 CSS */
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: #ffffff;
} 

我是强烈建议，对于这些命名空间（其他叫模块更恰切些），只应该包含方法

//LESS
//这里应该只包含方法，否则里面的合法语句会生成出来
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .red{ color: red; }
}
//这里是具体调用，通过XXX > YYY方式进行调用，本人觉得用 -〉更可靠，起码长得不像亲子选择器
#header a {
  color: orange;
  #bundle > .button;
}
/* 生成的 CSS */

#bundle .red {
  color: red;
}
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}

具体自己可以到这个网站玩玩！