Sass @extend και Απόκτηση

Ο οδηγός Sass @extend

Οδηγία @extend Η οδηγία επιτρέπει τη μεμονωμένη κοινή χρήση ενός συνόλου CSS ιδιοτήτων από έναν επιλογέα σε έναν άλλο.

Αν έχετε στοιχεία με σχεδόν τα ίδια στυλ αλλά με μικρές διαφορές σε μερικά λεπτομέρειες, τότε Οδηγία @extend Η οδηγία είναι πολύ χρήσιμη.

Η παρακάτω παράδειγμα Sass δημιουργεί μια βασική μορφή για το κουμπί (η μορφή αυτή θα χρησιμοποιηθεί για τηνmajority των κουμπιών). Στη συνέχεια， δημιουργούμε μορφή για το κουμπί "Report" και για το κουμπί "Submit". Τα κουμπιά "Report" και "Submit" είναι μέσω Οδηγία @extend Οι οδηγίες 继承所有 .button-basic 类的 CSS 属性。Επιπλέον，επισημαίνουν τις δικές τους χρώματα:

Σύνταξη SCSS:

.button-basic  {
  περίγραμμα: none;
  χώρος: 15px 30px;
  καθορισμός κειμένου: κέντρο;
  μέγεθος γραμματοσειράς: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  χρώμα υποβάθρου: κόκκινο;
}
.button-submit  {
  @extend .button-basic;
  χρώμα υποβάθρου: πράσινο;
  χρώμα: λευκό;
}

Μετά τη σύνταξη, το CSS θα είναι ως εξής:}

Εκτύπωση CSS:

.button-basic, .button-report, .button-submit {
  περίγραμμα: none;
  χώρος: 15px 30px;
  καθορισμός κειμένου: κέντρο;
  μέγεθος γραμματοσειράς: 16px;
  cursor: pointer;
}
.button-report  {
  χρώμα υποβάθρου: κόκκινο;
}
.button-submit  {
  χρώμα υποβάθρου: πράσινο;
  χρώμα: λευκό;
}

Με τη χρήση Οδηγία @extend Παράδειγμα: Δεν χρειάζεται να καθορίσετε πολλαπλές κλάσεις για στοιχεία HTML, όπως:<button class="button-basic button-report">Αναφορά Αυτού</button>. Απλά καθορίστε .button-report για να αποκτήσετε δύο ομάδες στυλ.

Οδηγία @extend Οι οδηγίες βοηθούν στη διατήρηση του κώδικα Sass σας πολύ ξηρός (DRY).