การเชื่อมต่อซีเลคเตอร์ใน LESS

บางครั้งเราต้องการให้เมื่อคอมไพล์โครงสร้างที่ซ้อนกัน พวกมันเชื่อมต่อกันไม่ใช่ผ่านช่องว่าง แต่เป็นแบบติดกันทั้งหมด สำหรับสิ่งนี้ก่อนชื่อของซีเลคเตอร์ที่ซ้อนอยู่ จำเป็นต้องใส่เครื่องหมายแอมเพอร์แซนด์:

styles.lessdiv {
  &.block {
    width: 300px;
  }
}

ผลลัพธ์หลังจากคอมไพล์ เราจะได้ โค้ดต่อไปนี้:

styles.cssdiv.block {
  width: 300px;
}
Задание 1

บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

styles.less#block {
  &.xxx {
    width: 300px;
  }
}
Задание 2

บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

styles.less#block {
  .xxx {
    width: 300px;
  }
}
Задание 3

บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

styles.less#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}
Задание 4

บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

styles.less#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}
Задание 5

บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

styles.less#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}