Εργασία αποτελεσματικά με τις λιγότερες συμβουλές και εργαλεία

Στο προηγούμενο μας σεμινάριο, μάθαμε πώς να χρησιμοποιήσουμε λιγότερο στον πρακτικό τρόπο, χρησιμοποιώντας εφαρμογές όπως το ChrunchApp για την κατάρτιση του κώδικα. Αυτή τη φορά θα περπατήσουμε μέσω κάποιων εύχρηστων συμβουλών που θα είναι σε θέση να ενισχύσουν την απόδοση και την παραγωγικότητά μας κατά την σύνταξη σύντομης σύνταξης. Θα δημιουργήσουμε το περιβάλλον εργασίας / εργασίας μας επιτρέποντας την επισήμανση σύνταξης για τον τρέχοντα επεξεργαστή μας, χρησιμοποιώντας αυτόματα εργαλεία μεταγλωττιστή και χρησιμοποιώντας προρυθμισμένα Mixins και στη συνέχεια συγχρονίζοντάς τα όλα μαζί.

Λοιπόν, αν είστε έτοιμοι, ας αρχίσουμε.

Αποποίηση ευθυνών: Οι συμβουλές που εξηγούνται παρακάτω προέρχονται από τις καθημερινές εμπειρίες μου ως σχεδιαστής ιστοσελίδων. Έτσι, πριν προχωρήσουμε πιο πέρα, θέλω να υπογραμμίσω ότι οι συμβουλές ίσως ταιριάζουν με ορισμένους σχεδιαστές και όχι με άλλους. όπως κάθε άλλη συμβουλή που βρίσκετε στον Ιστό. Παρ 'όλα αυτά, ελπίζω ότι μπορείτε να αποκομίσετε κάτι χρήσιμο από τις παρακάτω συμβουλές.

1. Ετικέτα σήμανσης κώδικα

Όπως αναφέρθηκε προηγουμένως, σας παρουσιάσαμε στο ChrunchApp. Ωστόσο, αυτή η εφαρμογή ενδέχεται να μην είναι η προτίμηση κάθε σχεδιαστή ιστού. επειδή κάθε σχεδιαστής έχει το δικό του περιβάλλον εργασίας, συμπεριλαμβανομένου του επεξεργαστή κώδικα της επιλογής τους.

Αντί να εγκαταστήσετε έναν άλλο επεξεργαστή κώδικα, μπορείτε να χρησιμοποιήσετε ακόμα την τρέχουσα έκδοση και να ενεργοποιήσετε την επισήμανση σύνταξης σε αυτήν. Έτσι, σε αυτή την ανάρτηση, θα μοιραστώ κάποιες συμβουλές για να προσθέσω τον κωδικό ΜΗΚΟΣ στο 2 διάσημους συντάκτες κειμένων: Υψηλό κείμενο 2 και Μπλοκ ΣΗΜΕΙΩΣΕΩΝ++.

Υψηλό κείμενο 2

Αυτός ο συντάκτης είναι επί του παρόντος η προτιμώμενη μου επιλογή να με βοηθήσει να συντάξω κωδικούς. Αυτή η εφαρμογή είναι διαθέσιμη για Windows, Linux και OSX, επομένως, ανεξάρτητα από το λειτουργικό σας σύστημα, θα είστε σε θέση να ακολουθήσετε αυτήν την συμβουλή.

Τώρα, ας το κατεβάσετε από την επίσημη ιστοσελίδα της και δοκιμάστε αυτό το πρόγραμμα επεξεργασίας. Στη συνέχεια, διαβάστε τις παρακάτω οδηγίες για να ενεργοποιήσετε την επισήμανση του χρώματος LESS σε αυτό.

Σημείωση: Βεβαιωθείτε ότι έχετε διαβάσει την άδεια πριν από τη λήψη, καθώς η δωρεάν έκδοση προορίζεται μόνο για αξιολόγηση.

Εγκατάσταση κονσόλας πακέτων

Αρχικά, ανοίξτε το Υψηλό Κείμενο 2 και εμφανίστε την Κονσόλα από αυτό το μενού Προβολή> Εμφάνιση κονσόλας

Στη συνέχεια, αντιγράψτε και επικολλήστε την ακόλουθη γραμμή εντολών στην Κονσόλα και, στη συνέχεια, πατήστε Enter για να εγκαταστήσετε τον έλεγχο του πακέτου από το wBond.net:

εισαγωγή urllib2, os; pf = "Έλεγχος συσκευασίας". ipp = sublime.installed_packages_path (); os.makedirs (ipp) αν όχι os.path.exists (ipp) άλλο Κανένα. urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())). ανοιχτό (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (', '% 20')). read ()), εκτύπωση 'Παρακαλούμε επανεκκινήστε Sublime Text για να ολοκληρωθεί η εγκατάσταση'

Αυτό Κονσόλα πακέτων θα μας βοηθήσει να εγκαταστήσουμε το highlight-package.

Εγκαθιστώντας το πακέτο MORE-highlighting

Κάντε επανεκκίνηση του Υψηλού Κειμένου 2 και εμφανίστε την Παλέτα Εντολών από αυτό το μενού Εργαλεία> Παλέτα εντολών. Περιμένετε μέχρι να ολοκληρωθεί η φόρτωση της λίστας πακέτων. Στη συνέχεια, πληκτρολογήστε Εγκατάσταση πακέτου για την αναζήτηση και φόρτωση αποθετηρίων πακέτων.

Στη συνέχεια, αναζητήστε το πακέτο LESS από τη λίστα αποθετηρίων και πατήστε Enter.

Περιμένετε ένα λεπτό για το Sublime Text 2 για να κατεβάσετε και να εγκαταστήσετε το πακέτο έως ότου εμφανιστεί η ακόλουθη ειδοποίηση στη γραμμή κατάστασης.

Μεταβείτε στο μενού Προβολή> Σύνταξη, θα πρέπει να βλέπετε ΜΗΝ στη λίστα. Αυτό σημαίνει ότι το Υψηλό Κείμενο 2 υποστηρίζει .πιο λιγο και η σύντομη σύνταξη σας θα πρέπει επίσης να έχει την κατάλληλη ένδειξη χρώματος τώρα.

Μπλοκ ΣΗΜΕΙΩΣΕΩΝ++

Το Notepad ++ είναι ένας δωρεάν επεξεργαστής κώδικα Open Source και έχει πολλά χρήσιμα πρόσθετα για να επεκτείνει τη λειτουργικότητά του. Χρησιμοποιείται επίσης ευρέως από πολλούς σχεδιαστές ιστοσελίδων / προγραμματιστές, ιδιαίτερα εκείνους που συνεργάζονται με το λειτουργικό σύστημα των Windows. Έτσι, αποφασίζω να συμπεριλάβω και την άκρη για να προσθέσετε λιγότερο κείμενο που τονίζει.

Εγκαταστήστε το λιγότερο στο Σημειωματάριο++

Η ενεργοποίηση του λιγότερου χρώματος στο Notepad ++ είναι αρκετά εύκολη.

Πρώτα κάντε λήψη του πακέτου LESS για το Notepad ++ από αυτόν τον σύνδεσμο (userDefineLang_LESS.xml). Στη συνέχεια, πηγαίνετε στο Προβολή> Διάλογος καθοριζόμενη από το χρήστη.

Εμφανίζεται το παρακάτω αναδυόμενο πλαίσιο. Κάντε κλικ στο Εισαγωγή… και εντοπίστε τα ληφθέντα .xml αρχείο. Στη συνέχεια, κάντε επανεκκίνηση του Σημειωματάριου++.

Ανοίξτε το αρχείο .less και μεταβείτε στο μενού Γλώσσα. Θα πρέπει τώρα να βλέπετε λιγότερο. Επιλέξτε το για να επισημάνετε χρώμα με την σύντομη σύνταξη.

Περισσότερες πηγές

Υπάρχουν πολλοί άλλοι συντάκτες στην αγορά. Έτσι, εδώ έχουμε μερικές χρήσιμες συνδέσεις για σας αν δεν χρησιμοποιείτε κανέναν από τους παραπάνω συντάκτες.

Adobe DreamWeaver

Αναμφίβολα, το Dreamweaver έχει τεράστια βάση χρηστών. Είναι διαθέσιμο τόσο για Mac όσο και για Windows. Έτσι, αν χρησιμοποιείτε αυτόν τον επεξεργαστή, εδώ είναι ένα από τα καλές πηγές για να εγκαταστήσετε το λιγότερο επισημάνετε στο Adobe DreamWeaver.

Coda

Εάν χρησιμοποιείτε Mac ίσως γνωρίζετε το Coda, αυτός ο επεξεργαστής είναι ένας από τους πιο δημοφιλείς μεταξύ των χρηστών Mac. Και, εδώ είναι πώς μπορείτε να εγκαταστήσετε λιγότερο στην Coda.

Geany

Είναι ένας από τους πιο δημοφιλείς συντάκτες κώδικα μεταξύ των χρηστών του Linux. Ορισμένοι υπολογιστές στο γραφείο μου που τρέχουν στο Linux χρησιμοποιούν επίσης το Geany. Επομένως, εάν το χρησιμοποιείτε επίσης, μπορείτε να συμπεριλάβετε την επισήμανση MORE, ακολουθώντας αυτές τις οδηγίες στο SuperUser.com

2. ΜΑΙΟΣ Compiler

Σε αντίθεση με το ChrunchApp που έχει ενσωματωμένο LESS compiler, οι άλλοι συντάκτες δεν θα το έχουν από προεπιλογή. Παρόλο που υπάρχουν ορισμένοι τρόποι για να συμπεριληφθεί, αλλά είναι μάλλον τεχνικός για τους γενικούς χρήστες. Έτσι, η καλύτερη λύση που έχω είναι να κάνω την σύνταξη χρησιμοποιώντας τα παρακάτω εργαλεία: WinLESS ή LESS.app. Το WinLESS είναι ένας μεταγλωττιστής σχεδιασμένος για Windows, ενώ το LESS.app είναι κατασκευασμένο για OSX.

Αυτά τα εργαλεία μπορούν να μετατρέψουν τον κώδικα ΜΑΙΟΣ μας σε ένα στατικό CSS αυτόματα καθώς αποθηκεύουμε το αρχείο και αναφέρουμε άμεσα αν υπάρχει κάποιο σφάλμα στον κώδικα. Λοιπόν, επιτρέψτε μου να σας δείξω πόσο χούφτα είναι αυτό το εργαλείο:

Πρώτον, θα ήθελα να κατεβάσετε το WinLESS και να το εγκαταστήσετε.

Κάντε κλικ στο κουμπί Προσθήκη φακέλου και εντοπίστε τον κατάλογο στον οποίο βάζετε το δικό σας .πιο λιγο αρχεία (υποθέτω ότι έχετε ήδη δημιουργήσει τουλάχιστον ένα). Μόλις προσθέσετε ένα. Το WinLESS θα σαρώσει και θα βρει όλα .πιο λιγο αρχεία και θα σας δείξει στη λίστα.

Πηγαίνετε στο μενού Αρχείο> Ρύθμιση, και βεβαιωθείτε ότι έχετε ελέγξει αυτές τις επιλογές.

• Αυτόματη μεταγλώττιση αρχείων όταν αποθηκεύονται
• Εμφάνιση μηνύματος στην επιτυχημένη μεταγλώττιση

Μπορούμε επίσης να ορίσουμε τον φάκελο εξόδου, σε περίπτωση που θέλουμε να το αποθηκεύσουμε αλλού. Αλλά, σε αυτό το παράδειγμα θα αφήσουμε αυτήν την επιλογή όπως είναι. πράγμα που σημαίνει ότι το αρχείο εξόδου θα αποθηκευτεί στον ίδιο κατάλογο με το .πιο λιγο αρχείο.

Ανοιξε το δικό σου .πιο λιγο αρχείου από τον κατάλογο που προστέθηκε, κάντε μερικές αλλαγές και αποθηκεύστε το.

Το WinLESS θα σας ειδοποιήσει όταν το αρχείο καταρτίστηκε με επιτυχία .css ή εάν υπάρχει σφάλμα στους κωδικούς. Με αυτό τον τρόπο μπορείτε να ελέγξετε απευθείας την έξοδο .css, αντί να περιμένετε να ολοκληρωθούν οι κώδικες για να την συντάξετε.

Εάν χρησιμοποιείτε Mac, μπορείτε να χρησιμοποιήσετε το LESS.app που έχει την ίδια λειτουργικότητα με το WinLESS.

Προκαθορισμένα Mixins

Στις τρέχουσες σύγχρονες πρακτικές σχεδίασης ιστοσελίδων, θα χρησιμοποιήσουμε ιδιότητες CSS3 όπως Gradient, Shadow ή Border Radius που μοιάζουν με αυτό:

-webkit-ακτίνα-ακτίνα: 3px; -moz-border-radius: 3px. ακτίνα ακτίνων: 3px;

ή

υπόβαθρο: -moz-γραμμική κλίση (κορυφή, # f0f9ff 0%, # a1dbff 100%). υπόβαθρο: -webkit-γραμμική κλίση (κορυφή, # f0f9ff 0%, # a1dbff 100%). υπόβαθρο: -ο-γραμμική κλίση (κορυφή, # f0f9ff 0%, # a1dbff 100%). υπόβαθρο: -ms-γραμμική κλίση (κορυφή, # f0f9ff 0%, # a1dbff 100%). υπόβαθρο: γραμμική κλίση (κορυφή, # f0f9ff 0%, # a1dbff 100%).

Στο προηγούμενο μας σεμινάριο κάναμε μερικά Mixins να απλοποιήσουν αυτή τη σύνταξη. Ευτυχώς, μερικοί άνθρωποι στην κοινότητα του σχεδιασμού ιστοσελίδων είναι αρκετά γενναιόδωροι ώστε να χάσουν χρόνο για να συντάξουν αυτά τα χρήσιμα Mixins, έτσι ώστε να μην χρειαστεί να τα καταρτίσουμε από την αρχή.

Και, ένα από τα αγαπημένα μου είναι τα Λιγότερα Στοιχεία που περιέχει πολλούς χρήσιμους κανόνες CSS3. Έτσι, γράφουμε τώρα λιγότερες γραμμές κώδικα από τα κουραστικά προθέματα πωλητών.

Εντάξει, τώρα, ας δούμε πώς όλες αυτές οι παραπάνω συμβουλές μπορούν πραγματικά να βοηθήσουν.

Κάνοντάς τους όλοι μαζί

Σε αυτό το παράδειγμα θα δημιουργήσω ένα απλό κουμπί σύνδεσης. Πρώτα θα ήθελα να δημιουργήσω ένα νέο έγγραφο HTML και να θέσω το ακόλουθο προσαύξηση:

     Κάντε κλικ στο με 

Δημιουργώ ένα styles.less ως το κύριο φύλλο ύφους ΜΗ, αποθηκεύστε τον στον ίδιο φάκελο με το έγγραφο HTML και προσθέστε το φάκελο στο WinLESS.

Εισαγωγή του elements.less έχουμε κατεβάσει πριν χρησιμοποιήσουμε αυτή τη σύνταξη:

@import "elements.less";

Τώρα, μπορούμε να χρησιμοποιήσουμε οποιαδήποτε Mixins που παρέχονται από elements.less όπως .βαθμίδα, .στρογγυλεμένες, και .όριο. Είμαι βέβαιος ότι το όνομα Mixins είναι αρκετά αυτονόητο.

Στη συνέχεια, τοποθετήστε τους παρακάτω κανόνες LESS, στο φύλλο στυλ σας. Και, αποθηκεύστε το ξανά

 μια εμφάνιση: inline-block; συμπλήρωση: 10px 20px; χρώμα: # 555; κείμενο-διακόσμηση: κανένα? .bw-κλίση (#eee, 240, 255). . . &: μετακινήστε το .bw-gradient (#eee, 255, 240);  

Δεδομένου ότι μας .πιο λιγο Το αρχείο έχει προστεθεί στο WinLESS, αυτόματα θα καταρτιστεί .css. Τώρα ας δούμε τα αποτελέσματα.

Λοιπόν, δεν είναι τόσο κακό δεν είναι αυτό, θεωρώντας ότι αυτό το κουμπί δημιουργήθηκε με λιγότερες γραμμές από αυτό που χρειαζόταν. Και, εδώ είναι η πραγματική παραγόμενη στατική CSS:

 μια εμφάνιση: inline-block; συμπλήρωση: 10px 20px; χρώμα: # 555; κείμενο-διακόσμηση: κανένα? background: #eeeeee; υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κάτω, αριστερή κορυφή, έγχρωμη στάση (0, # f0f0f0), έγχρωμη διακοπή (1, #ffffff)). υπόβαθρο: -ms-γραμμική κλίση (κάτω, # f0f0f0 0%, # f0f0f0 100%). υπόβαθρο: -moz-γραμμική κλίση (κάτω κέντρο, # f0f0f0 0%, #ffffff 100%); -webkit-ακτίνα-ακτίνα: 2px; -moz-border-radius: 2px; ακτίνα ακτίνων: 2px; -moz-φόντο-clip: padding? -webkit-clip-background: padding-box; Κλιπ φόντου: κουτί επένδυσης; σύνορα-κορυφή: στερεά 1px #eeeeee; αριστερά: στερεά 1px #eeeeee; όριο-δεξιά: στερεό 1px #eeeeee; σύνορα-κάτω: στερεά 1px #eeeeee;  α: μετακίνηση background: #eeeeee; υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κάτω, αριστερή κορυφή, έγχρωμη διακοπή (0, #ffffff), έγχρωμη διακοπή (1, # f0f0f0)). υπόβαθρο: -ms-γραμμική κλίση (κάτω, #ffffff 0%, #ffffff 100%). υπόβαθρο: -moz-γραμμική κλίση (κάτω κέντρο, #ffffff 0%, # f0f0f0 100%). 

Συνοψίζοντας

Ακολουθεί μια γρήγορη περίληψη των όσων συζητήσαμε σε αυτήν την ανάρτηση:

• Ενεργοποιώντας την επισήμανση σύνταξης στον τρέχοντα συντάκτη μας, δεν χρειάζεται να εγκαταστήσετε έναν επιπλέον επεξεργαστή μόνο για τη σύνταξη σύντομης σύνταξης. αυτό μπορεί να σας εξοικονομήσει χώρο / μνήμη στο δίσκο σας.
• Επίσης, δεν χρειάζεται πλέον να κατεβάζουμε και να συνδέουμε τη βιβλιοθήκη LESS.js με την κεφαλή HTML, όπως κάναμε και στο τελευταίο μας σεμινάριο. Με αυτό τον τρόπο, το έγγραφό μας HTML παραμένει καθαρό και τακτοποιημένο.
• Χρησιμοποιώντας εργαλεία μεταγλώττισης, όπως το WinLESS και το LESS.app, μπορεί να δημιουργηθεί αμέσως η στατική έξοδος CSS. Επομένως, αν υπάρχει κάποιο πρόβλημα με τη σύνταξη, μπορούμε να το εξετάσουμε αμέσως.
• Προεπιλεγμένα Mixins, όπως το LESS Elements, είναι ο καλύτερος φίλος μας. Μπορεί πραγματικά να σώσει τον χρόνο μας κατά την κατάρτιση κουραστική ιδιοκτησία CSS3.

.