К содержанию

Σύνδεση Επιλογέων σε 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;
    }
  }
}