К содержанию

Penggabungan Selektor di SASS

Terkadang kita perlu agar saat kompilasi konstruksi tersarang, mereka terhubung tidak melalui spasi, namun secara langsung. Untuk ini, sebelum nama selektor tersarang perlu diberi tanda ampersand:

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

Hasilnya setelah kompilasi, kita akan mendapatkan kode berikut:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Задание 2

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Задание 4

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Задание 5

Jelaskan, apa hasil kompilasi dari kode berikut:

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