การเชื่อมต่อซีเล็คเตอร์ใน 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;
    }
  }
}