巢狀

一、巢狀規則

header{
    h1{
        font-size: 18px;
        color: green;
    }
    .box1{
        width: 300px; height: 200px;
        background: red;
    }
}

編譯後的css:

header h1 {
  font-size: 18px;
  color: green;
}
header .box1 {
  width: 300px;
  height: 200px;
  background: red;
}

二、父元素選擇器（&）

footer{
    h1{
        font-size: 20px;
        color: orange;
    }
    .box2{
        width: 500px; height: 100px;
        background: green;
        &:hover{
            background: blue;
        }
    }
}

編譯後的css:

footer h1 {
  font-size: 20px;
  color: orange;
}
footer .box2
 
 {
  width: 500px;
  height: 100px;
  background: green;
}
footer .box2:hover {
  background: blue;
}

三、改變選擇器的順序
將&放到當前選擇器之後，就會將當前選擇器插入到時所有父元素之前。

.father{
    .son{
        .grand &{
            color: red;
        }
    }
}

編譯後的css:

.grand .father .son {
  color: red;
}

四、組合生成所有可能的選擇器列表

p
 
,a,ul,li,span{
    border: 1px solid red;
    & &{
        border-top: 0;
    }
}

編譯後的css:

p,
a,
ul,
li,
span {
  border: 1px solid red;
}
p p,
p a,
p ul,
p li,
p span,
a p,
a a,
a ul,
a li,
a span,
ul p,
ul a,
ul ul,
ul li,
ul span,
li p,
li a,
li ul,
li li,
li span,
span p,
span a,
span ul,
span li,
span span {
  border-top: 0;
}

運算

任何數值、顏色和變數都可以進行運算；
一、數值型運算
less會為你自動推算數值和單位，所以我們不用每個值都加上單位，注意，運算子與值之間必須以空格空開，涉及優先及時以（）進行優先順序運算；

.div{
    width: 450 + 450px;
    height: 2 * 30px;
}

.div2{
    width: ( 300px + 200 ) * 2;
}

編譯後的css:

.div {
  width: 900px;
  height: 60px;
}
.div2 {
  width: 1000px;
}

二、顏色值運算
less在運算時，先將顏色值轉換為rgb模式，然後再轉換為16進位制的顏色值並返回,rgb模式他的值是 0~255，當你的值超過255則預設使用最大值255進行計算,不能直接使用顏色名稱進行運算。

.content{
    width: 300px; height: 200px;
    background: #000000 + 21;
}

編譯後的css:

.content {
  width: 300px;
  height: 200px;
  background: #151515;
}

名稱空間

有時候，你可能為了更好組織 CSS 或者單純是為了更好的封裝，將一些變數或者混合模組打包起來，一些屬性集之後可以重複使用。

#bgcolor(){
    background: #ffffff;
    .a{
        color: #8888888;
        &:hover{
            color: #ff6600;
        }
        .b{
            background: #333;
        }
    }

}

.bgcolor1{
    background: #fdfee0;
    #bgcolor>.a;
}

.bgcolor2{
    #bgcolor>.a>.b;
}

//省略>的寫法(將>改成空格即可)

編譯後的css:

.bgcolor1 {
  background: #fdfee0;
  color: #8888888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor1 .b {
  background: #333;
}
.bgcolor2 {
  background: #333;
}

作用域

Less中的作用域與程式語言中的作用域概念非常相似。首先會在區域性查詢變數和混合，如果沒找到，編譯器就會在父作用域中查詢，依次類推。

@color: orange;

.bgcolor{
    width: 50px;
    a{
        @color: #333;
        color: @color;
    }
    @color: red;
}

編譯後的css:

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