Το Emmet, γνωστό στο παρελθόν ως Zen Coding, είναι ένα από τα καλύτερα εργαλεία που πρέπει να έχετε για να αυξήσετε την παραγωγικότητά σας ενώ κωδικοποιείτε HTML ή CSS. Λειτουργεί ακριβώς όπως την ολοκλήρωση κώδικα, αλλά είναι πιο ισχυρό και καταπληκτικό. Είναι σε θέση να αυτοματοποιήσει το HTML / CSS από μια απλή φόρμα στη σύνθετη.
Ο Emmet προσφέρει καλή υποστήριξη για τον επεξεργαστή κειμένου ή το IDE (Integrated Development Environment) όπως Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm και πολλά άλλα. Υποστηρίζει επίσης online εργαλείο επεξεργασίας όπως JSFiddle, JSBin, CodePen, IceCoder και Codio .
Ο τρόπος εργασίας του Emmet είναι πληκτρολογώντας το πλήκτρο πληκτρολογίου καρτέλας όταν ολοκληρώσετε τη σύνταξη σύνταξης. Τα παρακάτω είναι τα πιο κοινά σύμβολα Emmet που μπορείτε να χρησιμοποιήσετε. Για να τα δείτε σε δράση, συνεχίστε να διαβάζετε.
Emmet - Καλύτερα κόλπα HTML
Θα εκπλαγείτε όταν γράφετε HTML με τον Emmet όπως και εγώ. Όπως αναφέρθηκε προηγουμένως, ο Emmet είναι σε θέση να συντομεύσει ένα απλό HTML σε πολύ περίπλοκο. Και είναι γραμμένα μόνο σε μία γραμμή κώδικα. Από προεπιλογή, αν συντομεύσετε άγνωστο όνομα ετικέτας, ο Emmet θα γράψει αυτόματα την ετικέτα που γράφετε. Δείτε την κινούμενη εικόνα παρακάτω για να την καταλάβετε εύκολα.
1. Φωτισμός
Για να φωλιάσετε μερικά στοιχεία, πρέπει να προσθέσετε μεγαλύτερο σημάδι > μετά από κάθε ετικέτα που θέλετε να χρησιμοποιήσετε. Για παράδειγμα, όταν θέλω να έχω μια header με nav, div, ul και li μέσα, πρέπει να πληκτρολογήσω header>nav>div>ul>li και το πλήκτρο καρτέλας hit.
2. Σύνολο
Εάν δεν θέλετε να φωλιάζετε τα στοιχεία σας, μπορείτε απλά να χρησιμοποιήσετε ένα σύμβολο συν + να ακολουθήσετε τις ετικέτες που θέλετε να προσθέσετε. Παράδειγμα, η header+section+article+footer θα δώσει διαφορετική θέση για την header, την section, το article και το footer .
3. Ανεβείτε
Όταν βρίσκεστε μέσα σε ένα παιδικό στοιχείο και θέλετε να έχετε ένα άλλο στοιχείο εκτός αυτού του παιδιού, μπορείτε εύκολα να ανεβείτε με ένα στοιχείο με το σύμβολο ^ . Αν το πληκτρολογήσετε δύο φορές, τότε θα ανεβείτε διπλό στοιχείο και ούτω καθεξής. Για παράδειγμα, εάν πληκτρολογήσετε header>div>h1>nav, θα έχετε το στοιχείο nav ακόμα στο εσωτερικό του h1. Για να το εξάγετε απλά, αντικαταστήστε το τελευταίο > με το ^ .
4. Προσθήκη κλάσης
Ο Emmet είναι επίσης σε θέση να συμπεριλάβει το όνομα της τάξης που προτιμάτε στην ετικέτα. Το σύμβολο που θα χρησιμοποιήσετε είναι το ίδιο με τον επιλογέα κλάσης στο CSS που είναι μια κουκίδα . σημάδι. Για παράδειγμα, αν θέλω να έχω ένα div με την κατηγορία .title, h1 με .title και nav με .fixed, τότε πρέπει απλά να γράψω div.container>header>h1.title+nav.fixed .
Αν θέλετε να έχετε περισσότερες από μία τάξεις μέσα, πληκτρολογήστε την επιπλέον τάξη σας μετά την πρώτη τάξη μαζί με την τελεία . σημάδι. Παράδειγμα: το div.container.center θα παράγει .
5. Προσθέστε αναγνωριστικό
Εκτός από την κλάση, μπορείτε επίσης να προσθέσετε ένα αναγνωριστικό στην ετικέτα σας με # υπογραφή. Η χρήση είναι ίδια με την προσθήκη κλάσης, αλλά δεν μπορείτε να πληκτρολογήσετε διπλό αναγνωριστικό μέσα. Αν προσπαθήσετε να το κάνετε αυτό, ο Emmet θα διαβάσει μόνο το τελευταίο αναγνωριστικό που πληκτρολογείτε.
6. Προσθήκη κειμένου
Ο Emmet δεν είναι απλώς τόσο απλός όσο απλώς συντομεύστε μερικές ετικέτες, μπορείτε ακόμη να προσθέσετε μια γραμμή κειμένου μέσα. Για να προσθέσετε κάποιο κείμενο, απλά πρέπει να τυλίξετε το κείμενο με το σύμβολο {} . Δεν χρειάζεται να προσθέσετε ένα μεγαλύτερο > σήμα, καθώς το κείμενο θα προστεθεί αυτόματα μέσα στην ετικέτα.
7. Προσθήκη χαρακτηριστικού
Αν θέλετε να προσθέσετε ένα άλλο χαρακτηριστικό εκτός από την κλάση και το id, απλά τοποθετήστε το χαρακτηριστικό που θέλετε να προσθέσετε στο σύμβολο [] . Για παράδειγμα, θέλω να έχω μια εικόνα που έχει logo.png πηγή με το λογότυπο alt, οπότε πληκτρολογώ img[src="logo.png"] .
8. Ομαδοποίηση
Όταν θέλετε να έχετε ένα στοιχείο με πολλαπλά ένθετα μέσα, τότε η ομαδοποίησή τους με το σύμβολο () θα σας βοηθήσει να το επιτύχετε εύκολα. Παράδειγμα, θέλω να έχω ένα δοχείο που έχει επικεφαλίδα με h1 και nav μέσα και μια άλλη ενότητα έξω από την επικεφαλίδα, θα γράψω απλά: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Πολλαπλασιασμός
Αυτό το χαρακτηριστικό μπορεί να γίνει ένα από τα αγαπημένα σας από τον Emmet. Όπως και με τον πολλαπλασιασμό, μπορούμε να πολλαπλασιάσουμε οποιοδήποτε στοιχείο όσο θέλουμε. Για να το χρησιμοποιήσετε απλά προσθέστε ένα αστέρι * υπογράψει μετά το στοιχείο που θέλετε να πολλαπλασιάσετε και να προσθέσετε τον αριθμό του στοιχείου. Για παράδειγμα, θέλω να γράψω πέντε li στοιχείο μέσα στο ul, τότε η σωστή σύνταξη είναι ul>li*5 .
10. Αυτόματη αρίθμηση
Η αυτόματη αρίθμηση θα σας βοηθήσει να γράψετε εύκολα διαφορετικό όνομα με αυξανόμενο αριθμό. Η σωστή σύνταξη για αυτό το χαρακτηριστικό είναι ένα σήμα δολαρίου $ . Η αυτόματη αρίθμηση χρησιμοποιείται καλύτερα με τον πολλαπλασιασμό. Παράδειγμα, θέλω να προσθέσω το προηγούμενο στοιχείο μου με μια κλάση από το στοιχείο 1 στο στοιχείο5. Επομένως, πρέπει να προσθέσω επιπλέον όνομα κλάσης με το σύμβολο του δολαρίου: ul>li.item$*5 .
11. Lorem
Εάν χρησιμοποιούσατε να γράψετε κάποιο ψεύτικο κείμενο ανοίγοντας τη γεννήτρια lipsum όπως το lipsum.com, με τον Emmet δεν χρειάζεται να το κάνετε πια. Ο Emmet υποστηρίζει επίσης μια lipsum γεννήτρια κειμένου με σύνταξη lorem ή lipsum . Μπορείτε επίσης να ορίσετε πόσο χρόνο θα γίνει το κείμενό σας. Για παράδειγμα, θέλω να έχω κάποιο κείμενο με διάρκεια 10 λέξεων, τότε θα πληκτρολογήσω lorem10 .
12. Αυτόματο έγγραφο
Όταν ξεκινάτε ένα νέο έργο, αντί να γράφετε τη δομή html με μη αυτόματο τρόπο ή να αντιγράφετε την επικόλληση από άλλους πόρους, ο Emmet μπορεί να το κάνει καλύτερα για εσάς. Το μόνο που χρειάζεται να κάνετε είναι να πληκτρολογήσετε ένα θαυμαστικό ! σημάδι, καρτέλα hit και η μαγεία συμβαίνει. Αυτό θα δημιουργήσει μια δομή εγγράφων HTML5 για εσάς, αν θέλετε να χρησιμοποιήσετε ένα HTML4 αντί, τότε απλά πληκτρολογήστε html:4t .
13. Σύνδεσμος
Αν έχετε ένα αρχείο favicon, rss ή εξωτερικό αρχείο CSS που θέλετε να προσθέσετε στο έγγραφό σας, μπορείτε να χρησιμοποιήσετε κόλπα συνδέσεων για να τα γράψετε πιο γρήγορα. Για να συμπεριλάβετε ένα favicon, πληκτρολογήστε link:favicon τότε θα σας δημιουργήσει έναν σύνδεσμο favicon με το προεπιλεγμένο όνομα αρχείου favicon.ico μέσα. Και για το css, link:css θα σας δημιουργήσει έναν σύνδεσμο CSS με το προεπιλεγμένο όνομα style.css στο εσωτερικό του. Και το RSS θα είναι rss.xml ως το προεπιλεγμένο όνομα.
Μπορείτε να τα συνδυάσετε με το σύμβολο συν + για να δημιουργήσετε ταχύτερους πόρους.
14. Άγκυρα
Από προεπιλογή, όταν πληκτρολογείτε a ετικέτα, στη συνέχεια πιέζετε την καρτέλα, θα πάρετε μια πλήρη ετικέτα με το χαρακτηριστικό href μέσα. Αλλά μπορείτε να προσθέσετε // αξία αν συνδυάσετε με link για παράδειγμα a:link . Και αν θέλετε να έχετε έναν σύνδεσμο αλληλογραφίας, χρησιμοποιήστε a:mail .
15. Smart Skipping
Τα τελευταία κόλπα HTML που θα σας δώσω είναι η έξυπνη δυνατότητα παράκαμψης. Βασικά, δεν έχετε γράψει το όνομα της ετικέτας όταν θέλετε να έχετε τάξη ή id μέσα σε αυτό. Αυτό ισχύει μόνο για ορισμένες συγκεκριμένες συνθήκες.
Πρώτον, εάν θέλετε να έχετε ένα div με ID ή κατηγορία μέσα, δεν χρειάζεται να γράψετε το όνομα της ετικέτας, απλά γράψτε απευθείας το id ή το σύμβολο κλάσης μαζί με το όνομά του.
Δεύτερον, όταν βρίσκεστε μέσα σε μια ετικέτα ul, παραλείπετε να γράψετε την ετικέτα li εάν έχει μια κλάση ή id.
Και το τελευταίο εφαρμόζεται στην ετικέτα table . Μπορείτε να παραλείψετε να γράψετε την ετικέτα tr και td εάν έχουν τάξη ή id και ο Emmet θα τα προσθέσει αυτόματα για εσάς.
Emmet - Καλύτερα κόλπα CSS
Αφού μάθετε μερικά HTML τεχνάσματα, τώρα ήρθε η ώρα για το CSS. Μερικά από τα σύμβολα που εμφανίζονται στην κορυφή της εικόνας δεν θα λειτουργούν με το CSS. Είναι μεγαλύτερα > και ανεβαίνουν ^ σύμβολα. Εάν τα χρησιμοποιείτε, θα παράγουν ακριβώς όπως το σύμβολο συν + . Λοιπόν, ας πάμε.
1. Πλάτος & Ύψος
Ο καθορισμός width και height με το Emmet είναι πολύ εύκολο. Απλά πρέπει να γράψετε την πρώτη λέξη τους ακολουθούμενη από το μέγεθος που θέλετε να προσθέσετε. Από προεπιλογή, αν δεν καθορίσετε τις μονάδες, ο Emmet θα τις δημιουργήσει με μονάδα px . Το σύμβολο της διαθέσιμης μονάδας είναι % και em .
2. Κείμενο
Υπάρχουν ορισμένα εύχρηστα σύμβολα ιδιοτήτων κειμένου και θα δημιουργηθούν με την προεπιλεγμένη τιμή. ta θα δημιουργήσει text-align με left τιμή, td θα είναι text-decoration με none τιμή και tt θα γίνει text-transform με uppercase αξία.
3. Ιστορικό
Για να προσθέσετε φόντο, απλά χρησιμοποιήστε τη συντομογραφία bg . Μπορείτε να το συνδυάσετε με bgi για να πάρετε background-image, bgc για background-color και bgr για background-repeat . Μπορείτε επίσης να γράψετε bg+ για να πάρετε μια πλήρη λίστα με την ιδιότητα του φόντου.
4. Πρόσωπο γραμματοσειράς
Το σύμβολο συν δεν ισχύει μόνο για φόντο. Για το @font-face, μπορείτε απλά να γράψετε @f+ για μια πλήρη λίστα της ιδιότητας @font-face . Εάν πληκτρολογήσετε @f χωρίς το σύμβολο συν, τότε θα έχετε μόνο ένα βασικό @font-face μόνο.
5. Διάφορα
Άλλα μεγάλα κόλπα είναι ότι μπορείτε να συντομεύσετε το γράψιμο animation anim animation . Εάν προσθέσετε ένα σημάδι μείον, θα πάρετε την ιδιότητα animation με πλήρη αξία. Υπάρχει επίσης το κείμενο @kf που θα παράγει πλήρη λίστα του @keyframe .
συμπέρασμα
Το Emmet είναι ένα πολύ μεγάλο εργαλείο εξοικονόμησης χρόνου για τον εξορθολογισμό της αναπτυξιακής σας διαδικασίας. Αν απλά γνωρίζετε τον Emmet, δεν είναι αργά για να το δοκιμάσετε τώρα. Αυτά τα κόλπα είναι μερικά μόνο από τα χαρακτηριστικά Emmet. Υπάρχουν τόνοι άλλων συμβόλων και σύνταξης στο Emmet, ειδικά για το CSS. Ακριβώς επικεφαλίστε στο έγγραφο Emmet ή εξαπατήστε το φύλλο για να συνεχίσετε την ανάγνωσή σας.
