.box1 {
  width: 300px;
  height: 100px;
  background-color: chartreuse;
  .box2 {
    width: 100px;
    height: 100px;
    background-color: aqua;
    color: rgb(226, 55, 55);
  }
}

// 變數，在變數中可以儲存一個任意的值
// 並且我們可以需要時，任意的修改變數中的值
@a: 100px;
@b: red;
@c:box4;

.box3{
  width: @a;
  height: @a;
}

// 作為類名，或者一部分值使用時必須以 @
 
{ 變數名 } 的形式使用
@{c}{
  width: 100px;
  background-image: url("@{c}/1.png");
}

div{
  // 變數發生重名時，會優先使用比較近的變數
  @d:150px;
  width: @d;
  height:@e;
}
// 可以在變數宣告前就是用變數
@e: color(#f000);


  .p1{
    width: 105px;
    height: 105px;
  }
// extend( ) 對當前選擇器的樣式（選擇器分組）
  .p2:extend(.p1) {
      color: red; 
  }
.p3{
  // 直接對指定的樣式引用，這裡就相當於將p1的樣式進行復制
  // mixin 混合
  .p1( );
 
}
// 使用類選擇器可以在選擇器後邊加一個括號這是我們就建立了一個mixins
// 加上括號css中不顯示/混合函式
.p4( ) {
  width: 130px;
  height: 130px;
  background-color: cadetblue;
}
.p5{
  .p4
}