การเชื่อมต่อซีเล็คเตอร์ใน SASS
บางครั้งเราต้องการให้เมื่อคอมไพล์โครงสร้างที่ซ้อนกัน พวกมันเชื่อมต่อกันไม่ใช่ผ่านช่องว่าง แต่เป็นแบบติดกันทั้งหมด ในการทำเช่นนี้ก่อนชื่อของซีเล็คเตอร์ที่ซ้อนอยู่ จำเป็นต้องใส่เครื่องหมายแอมเพอร์แซนด์:
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;
}
}
}
