大家一起學習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;}

具體自己可以到這個網站玩玩！