การเชื่อมต่อซีเลคเตอร์ใน LESS
บางครั้งเราต้องการให้เมื่อคอมไพล์โครงสร้างที่ซ้อนกัน พวกมันเชื่อมต่อกันไม่ใช่ผ่านช่องว่าง แต่เป็นแบบติดกันทั้งหมด สำหรับสิ่งนี้ก่อนชื่อของซีเลคเตอร์ที่ซ้อนอยู่ จำเป็นต้องใส่เครื่องหมายแอมเพอร์แซนด์:
div {
&.block {
width: 300px;
}
}
ผลลัพธ์หลังจากคอมไพล์ เราจะได้ โค้ดต่อไปนี้:
div.block {
width: 300px;
}
บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
#block {
&.xxx {
width: 300px;
}
}
บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
#block {
.xxx {
width: 300px;
}
}
บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
บอกหน่อยว่า ผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
