การเชื่อมต่อซีเล็คเตอร์ใน SASS
บางครั้งเราต้องการให้เมื่อคอมไพล์โครงสร้างที่ซ้อนกัน พวกมันเชื่อมต่อกันไม่ใช่ผ่านช่องว่าง แต่เป็นแบบติดกันทั้งหมด ในการทำเช่นนี้ก่อนชื่อของซีเล็คเตอร์ที่ซ้อนอยู่ จำเป็นต้องใส่เครื่องหมายแอมเพอร์แซนด์:
styles.scssdiv {
&.block {
width: 300px;
}
}
ผลลัพธ์หลังจากการคอมไพล์ เราจะได้ โค้ดต่อไปนี้:
styles.cssdiv.block {
width: 300px;
}
Задание 1
บอกหน่อยว่าผลลัพธ์จากการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
styles.scss#block {
&.xxx {
width: 300px;
}
}
Задание 2
บอกหน่อยว่าผลลัพธ์จากการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
styles.scss#block {
.xxx {
width: 300px;
}
}
Задание 3
บอกหน่อยว่าผลลัพธ์จากการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
styles.scss#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Задание 4
บอกหน่อยว่าผลลัพธ์จากการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
styles.scss#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Задание 5
บอกหน่อยว่าผลลัพธ์จากการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:
styles.scss#block {
.xxx {
&.zzz {
width: 300px;
}
}
}