ΜΑΘΕΤΕ ΜΑΘΗΜΑ CSS Σχεδιάζοντας μια μπάρα πλοήγησης με λεπτές επιλογές

Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.

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

Ένα από αυτά που τραβούσε την προσοχή μου από την εξέλιξη του σχεδιασμού ιστοσελίδων είναι σήμερα λιγότερο, μια προγραμματιζόμενη γλώσσα στυλ φύλλου που επεκτείνει τον τρόπο σύνταξης της σύνταξης CSS συνδυάζοντας μερικές έννοιες προγραμματισμού όπως μεταβλητές, mixins, λειτουργίες και λειτουργίες.

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

Λοιπόν, ας κάνουμε μερικές ασκήσεις με λιγότερο για να έχουμε καλύτερη εικόνα για το τι πρέπει να προσφέρει.

Σχεδίαση με λιγότερο

Σε αυτό το σεμινάριο θα προσπαθήσουμε να σχεδιάσουμε μια κλασσική γραμμή πλοήγησης μενού που εμπνέεται από αυτή στην Apple.com. Επειδή είναι μόνο "εμπνευσμένο" από το αρχικό προϊόν, λάβετε υπόψη ότι το τελικό προϊόν φροντιστηρίων δεν θα είναι ακριβώς το ίδιο με το πρωτότυπο.

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

• ΜΗΝ ΕΙΝΑΙ ΠΕΡΙΣΣΟΤΕΡΑ: Κάνετε την κωδικοποίηση CSS πιο εύκολη με λιγότερα
• Γράψτε καλύτερα το CSS με λιγότερα
• Εισαγωγή σε λιγότερο, και σύγκριση με το Sass

Παρασκευή

Πρώτα απ 'όλα, υπάρχουν ορισμένα βασικά πράγματα που χρειαζόμαστε για αυτό το μικρό έργο, δηλαδή:

1. ΛΕΠΤΟ Κείμενο επεξεργασίας

Θα χρειαστεί ένα πρόγραμμα επεξεργασίας κειμένου για να κωδικοποιήσετε το μενού πλοήγησης. Ωστόσο, οι περισσότεροι συντάκτες κειμένων που διατίθενται σήμερα στην αγορά (όπως το Dreamweaver, το Notepad ++, το InType, το Sublime Text 2) δεν έχουν ακόμη υποστηρίξει .πιο λιγο επεκτάσεις αρχείων από προεπιλογή, έτσι ώστε η σύνταξη ίσως να μην επισημανθεί καλά.

Έτσι, για τους σκοπούς αυτού του φροντιστηρίου, θα χρησιμοποιήσουμε ένα ειδικό πρόγραμμα επεξεργασίας κειμένου για την ΑΔΕΙΑ που ονομάζεται ChrunchApp. Μπορούμε να ανοίγουμε και να επεξεργαστούμε .πιο λιγο αρχεία επέκτασης και να τα μεταγλωττίσετε σε static CSS χρησιμοποιώντας αυτήν την εφαρμογή. Δεδομένου ότι πρόκειται για μια εφαρμογή της Adobe Air, μπορεί να εγκατασταθεί σε όλα τα μεγάλα λειτουργικά συστήματα για επιτραπέζιους υπολογιστές (Win, OSX και Linux).

Για τον επεξεργαστή HTML μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας που ήδη είστε έτοιμος να χρησιμοποιήσετε τώρα. Εγώ προσωπικά μου αρέσει το Sublime Text 2.

2. Less.js

Στη συνέχεια, κάντε λήψη της βιβλιοθήκης ΛΕΠΤΑ JavaScript από την επίσημη ιστοσελίδα τους, η τρέχουσα έκδοση είναι 1.2.1. Τοποθετήστε το μέσα στο φάκελο πρακτικής σας για αυτό.

Στη συνέχεια, συνδέστε το αρχείο με το έγγραφο HTML.

3. Χωρίς πρόθεμα

Θα χρησιμοποιήσουμε επίσης μερικές δυνατότητες CSS3 για να επιτύχουμε κάποια αποτελέσματα στο μενού πλοήγησης το οποίο θα περιλαμβάνει προθέματα προμηθευτών (-moz-, -o-, -webkit-) για να εμφανίζεται σωστά σε διαφορετικά προγράμματα περιήγησης. Ωστόσο, προσωπικά δεν προτιμώ να χρησιμοποιώ προθέματα, καθώς θα φουσκώνει το αρχείο CSS.

Για το λόγο αυτό, αποφάσισα να χρησιμοποιήσω μια ελεύθερη πρόθεμα, μια βιβλιοθήκη JavaScript που δημιουργήθηκε από τη Lea Verou, η οποία θα χειρίζεται αυτόματα τα προθέματα προμηθευτών στο παρασκήνιο. Επομένως, θα χρειαστεί να γράψουμε μόνο την επίσημη σύνταξη από το W3C.

Κάντε λήψη του αρχείου και συνδέστε το με το αρχείο HTML.

Εντάξει, είμαστε όλοι δημιουργημένοι. τώρα ας αρχίσουμε τη δομή της σήμανσης HTML.

HTML Markup

Η πλοήγηση είναι πολύ απλή. Θα έχει πέντε μενού τυλιγμένα μέσα σε μια ετικέτα με μη ταξινομημένη λίστα. Ανοίξτε τον αγαπημένο σας επεξεργαστή HTML και τοποθετήστε την ακόλουθη σήμανση:

Λιγότερο στιλ

Σε αυτήν την ενότητα θα αρχίσουμε να σχεδιάζουμε την πλοήγηση με τη γλώσσα LESS. Για όσους είναι νέοι σε γλώσσα προγραμματισμού, η σύνταξη σύνταξης CSS με λιγότερο θα αισθανόταν λίγο περίεργη και αμήχανη. Αλλά μην ανησυχείτε, αφού έχετε κάποια πρακτική, θα είναι σίγουρα πιο ευχάριστη από τον τρόπο που γράφουμε καθαρό CSS (είναι η εμπειρία μου, είναι επίσης λίγο εθιστικό).

Ας εξετάσουμε το στυλ πλοήγησης από την πηγή έμπνευσης μας.

Όπως μπορούμε να δούμε στο παραπάνω screenshot, η πλοήγηση Apple.com έχει τα ακόλουθα 6 βασικά κοινά στυλ:

• σκιά
• σύνορο
• διαιρών
• κλίσεις
• επίδραση αιώρησης
• κείμενο

Θα αποθηκεύσουμε αυτά τα στυλ και θα τα αποθηκεύσουμε στο εσωτερικό τους config.less ως προεπιλεγμένο στυλ Διαμόρφωση; ορισμένοι σχεδιαστές θα μπορούσαν επίσης να το ονομάσουν lib.css που αντιπροσωπεύει Βιβλιοθήκη. Συνδέστε αυτό το αρχείο στο έγγραφό μας.

Βεβαιωθείτε ότι το τοποθετήσατε πριν από τη βιβλιοθήκη ΜΕΙΩΣΗΣ JavaScript.

Ορισμός βάσης χρώματος με μεταβλητές

Σε αυτό το βήμα θα ορίσουμε τη βάση χρωμάτων πλοήγησης χρησιμοποιώντας τις μεταβλητές. Η μεταβλητή σε LESS δηλώνεται χρησιμοποιώντας το @ σύμβολο.

@theme: # 555;

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

Ορισμός προκαθορισμένου στυλ σκιάς με Mixins

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

.σκιά κουτί-σκιά: 0 1px 2px 0 @theme; 

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

Καθορίστε το στυλ περιγράμματος με παραμετρικές αναμείξεις

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

.σύνορα (@radius: 3px) border-radius: @radius; σύνορα: 1px solid @theme - # 050505; 

Στον παραπάνω κώδικα ρυθμίσαμε το προεπιλεγμένο περιθώριο @ακτίνα κύκλου Για 3px και όπως προαναφέρθηκε, αυτή η τιμή μπορεί να αλλάξει αργότερα.

Καθορίστε την κλίση, τον διαχωριστή και τον στυλ με τη λειτουργία

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

.διαχωριστικό μορφής περιγράμματος: στερεό; πλάτος συνόρου: 0 1px 0 1px; border-color: διαφανές @theme - # 111 διαφανές @theme + # 333; 

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

Επίπεδο χρωμάτων

Λοιπόν, για μερικούς από σας που μπορεί να μπερδευτούν με τους τύπους, ας εξετάσουμε το παρακάτω διάγραμμα χρωμάτων για να κατανοήσουμε καλύτερα:

Ο μέγιστος σκούρος τόνος είναι # 000 (μαύρο), ενώ ο μέγιστος τόνος φωτός είναι #fff (λευκό) και την τρέχουσα βάση χρώμα μας # 555. Έτσι, αν θέλουμε να είναι η βάση χρώματος 3 επίπεδα πιο σκοτεινά από το ρεύμα, μπορούμε απλά να το αφαιρέσουμε # 333. Ο ίδιος τρόπος μπορεί επίσης να εφαρμοστεί για να ελαφρύνει το χρώμα.

Στη συνέχεια, θα χρησιμοποιήσουμε το χρώμα κλίσης.

.κλίση υπόβαθρο: γραμμική κλίση (άνω, @ θεμέλιο + # 252525 0%, @ θεμέλιο + # 171717 50%, @ θεμέλιο - # 010101 51%, @ θεμέλιο + # 151515 100%).  .Χωρίς αποτέλεσμα φόντο: γραμμική κλίση (κορυφή, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%)? 

Ορίστε το στυλ κειμένου με το Mixins

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

Πρώτον, όταν δίνεται στο κείμενο χρώμα που έχει ελαφρότητα ίση ή μεγαλύτερη από 50%, το σκιά κειμένου θα πρέπει να σβήνουν, στην περίπτωση αυτή το χρώμα # 000000.

.textcolor (@txtcolor) όταν (ελαφρότητα (@txtcolor)> = 50%) χρώμα: @txtcolor; σκιά κειμένου: 1px 1px 0px # 000000; 

Στη συνέχεια, όταν στο κείμενο δοθεί ένα χρώμα που η ελαφρότητα είναι μικρότερη από 50% σκιά κειμένου θα γίνει λευκό.

.textcolor (@txtcolor) όταν (ελαφρότητα (@txtcolor) 
Εισαγωγή Λιγότερο
 
Ας δημιουργήσουμε ένα άλλο .πιο λιγο όνομα αρχείου styles.less και την εισαγωγή config.less μέσα σε αυτό:
 
@import "config.less";
 
Προσθήκη γραμματοσειράς
 
Για να φαίνεται πιο ελκυστική η γραμμή πλοήγησης, θα χρησιμοποιήσουμε μια νέα οικογένεια γραμματοσειρών @ font-face κανόνας. Απροσδόκητα, @ font-face κανόνας υποστηρίζεται ήδη ήδη από τον IE6!
 
Αυτή τη φορά θα χρησιμοποιήσουμε τη γραμματοσειρά Asap. Κάντε λήψη από τη συλλογή προσώπων γραμματοσειράς Font Squirrel. Στη συνέχεια, εισαγάγετε τα παρακάτω στυλ στο πρόσφατα δημιουργημένο μας styles.less αρχείο.
 
@ γραμματοσειρά font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'). src: url ('fonts / Asap-Regular-webfont.eot? #iefix') μορφή ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.ttf') μορφή ('truetype'), μορφή url ('fonts / Asap-Regular-webfont.svg # AsapRegular') ('svg'); γραμματοσειρά-βάρος: κανονική. γραμματοσειρά: κανονικό;  
 
Σχεδίαση του σώματος με λειτουργίες χρώματος
 
Τώρα, θα δώσουμε ένα χρώμα φόντου στο σώμα (που θα πρέπει να είναι ελαφρύτερο από τη βάση χρωμάτων) καθώς και τον καθορισμό της γραμματοσειράς και του μεγέθους της γραμματοσειράς. Μπορούμε να πλησιάσουμε το αποτέλεσμα χρησιμοποιώντας τις λειτουργίες χρώματος:
 
Ο παρακάτω κώδικας θα φωτίσει το φόντο με 30%.
 
σώμα φόντο: φωτίζει (@theme, 30%); γραμματοσειρά-οικογένεια: AsapRegular, sans-serif; μέγεθος γραμματοσειράς: 11pt; 
 
 
 
Σχεδίαση της πλοήγησης με τον κανόνα που έχει τοποθετηθεί
 
Με λιγότερα μπορούμε να φωλιάζουμε τα στυλ απευθείας κάτω από τον γονέα του. Ας ρίξουμε μια ματιά στον παρακάτω κώδικα.
 
ο nav ετικέτα που περιέχει όλα τα απαραίτητα στοιχεία για τη ναυσιπλοΐα θα έχει τα ακόλουθα στυλ.
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; 
 
Παρατηρήστε ότι, αντί να δώσετε ξανά μια δέσμη κανόνων CSS, εισήγαγα μόνο .σύνορο για να δώσετε το στυλ των συνόρων και .σκιά για να προσθέσετε σκιά. Σε πραγματικές περιπτώσεις, αυτά τα σύνολα μαθημάτων μπορούν να επαναχρησιμοποιηθούν σε άλλο στοιχείο, όπου και αν χρειαστεί.
 
 
 
Στη συνέχεια, δίνουμε στυλ για το ul μεσα στην nav να έχει μηδενική παραμόρφωση και περιθώριο. Όχι πολύ καιρό πριν θα προσεγγίσουμε το στυλ γράφοντας κάτι τέτοιο:
 
nav ... nav ul ...
 
Δεν υπάρχει τίποτα κακό με αυτή την προσέγγιση, στην πραγματικότητα, το έκανα κάθε φορά και είμαι αρκετά άνετα με αυτό. Ωστόσο, αυτή η μέθοδος, πολλοί σχεδιαστές του CSS, έχει λεχθεί και σε ορισμένες περιπτώσεις δεν είναι εύκολο να αντιμετωπιστεί.
 
Τώρα μπορούμε να κάνουμε κάτι τέτοιο:
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; ul padding: 0; περιθώριο: 0; 
 
 
 
Και μετά το μενού θα εμφανιστεί σε μια σειρά χρησιμοποιώντας εμφάνιση: εν σειρά ιδιοκτησία.
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; ul padding: 0; περιθώριο: 0; li εμφάνιση: εν σειρά? 
 
 
 
Στη σύνταξη που ακολουθεί καθορίζουμε το στυλ ετικέτας anchor μενού και προσθέτουμε τα προκαθορισμένα στυλ, τα οποία είναι: .χρώμα κειμένου, .διαιρών, .βαθμίδα.
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; ul padding: 0; περιθώριο: 0; li εμφάνιση: εν σειρά? ένα κείμενο-διακόσμηση: κανένα? εμφάνιση: inline-block float: αριστερά. πλάτος: 156px; ύψος: 45px; κείμενο-ευθυγράμμιση: κέντρο; ύψος γραμμής: 300%. .textcolor (# f2f2f2); // Μπορείτε να αλλάξετε αυτόν τον διαχωριστή γραμμής. .βαθμίδα; 
 
Στον παραπάνω κώδικα εφαρμόζουμε δεκαεξαδικό χρώμα # f2f2f2 στην οποία η ελαφρότητα θεωρείται άνω του 50%, οπότε θα περίμενε κανείς ότι η σκιά θα γίνει σκοτεινή (αυτόματα). Ο υπόλοιπος κώδικας που είμαι σίγουρος είναι αρκετά αυτονόητος.
 
 
 
Ωστόσο, εάν κοιτάξουμε το παραπάνω αποτέλεσμα, κάθε μενού έχει διαχωριστικά, με αποτέλεσμα το τελευταίο τμήμα να ξεχειλίζει προς τα κάτω. Επομένως, πρέπει να παραλείψουμε το στυλ περιγράμματος για το πρώτο και το τελευταίο παιδί της γραμμής πλοήγησης.
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; ul padding: 0; περιθώριο: 0; li εμφάνιση: εν σειρά? ένα κείμενο-διακόσμηση: κανένα? εμφάνιση: inline-block float: αριστερά. πλάτος: 156px; ύψος: 45px; κείμενο-ευθυγράμμιση: κέντρο; ύψος γραμμής: 300%. .textcolor (# f2f2f2); // Μπορείτε να αλλάξετε αυτόν τον διαχωριστή γραμμής. .βαθμίδα;  li: πρώτο-παιδί ένα border-left: none?  li: τελευταίο παιδί ένα border-right: none? 
 
 
 
Κρατήστε το κράτος
 
Για το τελευταίο βήμα θα προσθέσουμε το φαινόμενο του hover. Με λιγότερα μπορούμε να προσθέσουμε ψευδο-στοιχείο όπως :φτερουγίζω χρησιμοποιώντας & & σύμβολο.
 
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .σύνορο; .σκιά; ul padding: 0; περιθώριο: 0; li εμφάνιση: εν σειρά? ένα κείμενο-διακόσμηση: κανένα? εμφάνιση: inline-block float: αριστερά. πλάτος: 156px; ύψος: 45px; κείμενο-ευθυγράμμιση: κέντρο; ύψος γραμμής: 300%. .textcolor (# f2f2f2); // Μπορείτε να αλλάξετε αυτόν τον διαχωριστή γραμμής. .βαθμίδα; &: οπισθοδρομήστε .hovereffect;  li: πρώτο-παιδί ένα border-left: none?  li: τελευταίο παιδί ένα border-right: none? 
 
 
 
Αλλάξτε το θέμα χρώματος
 
Εδώ είναι το δροσερό μέρος της ΜΗΝ. Εάν θέλουμε να αλλάξουμε το συνολικό θέμα του χρώματος, μπορούμε να το κάνουμε σε λιγότερες αλλαγές γραμμής από αυτό που χρειαζόμαστε σε καθαρό CSS.
 
Σε αυτή την περίπτωση, θα αλλάξω το χρώμα πλοήγησης να είναι ελαφρώς ελαφρύτερο. Απλά αλλάξτε τις ακόλουθες δύο γραμμές.
 
@theme: #ccc; // Αλλάξτε αυτό
 
.κείμενοcolor (# 555); //Και αυτό
 
Και εδώ είναι το αποτέλεσμα.
 
 
 
Συμπληρώστε λιγότερο στο CSS
 
Όταν εξακολουθούμε να χρησιμοποιούμε το ΛΟΙΠΟΣ JavaScript, θα τραβήξει το .πιο λιγο αρχείο και μεταφράστε το σε στατικό CSS, έτσι ώστε το πρότυπο πρόγραμμα περιήγησης να το ερμηνεύσει. Αυτή είναι μια διπλή δουλειά στην πλευρά του πελάτη, για να μην αναφέρουμε πλεονάζοντα και αποβλήτων bandwidth. Το κύριο σημείο του LESS είναι στη ροή εργασίας για να απλοποιήσουμε την πρακτική μας στη σύνταξη του στατικού CSS ώστε να είναι πιο δυναμική και προγραμματιζόμενη.
 
Έτσι, όταν πρόκειται να βάλουμε ζωντανά τη γραμμή πλοήγησης σε μια ιστοσελίδα, είναι σημαντικό να συντάξουμε το αρχείο LESS σε στατικό CSS.
 
Κάντε κλικ στο Κρούστε το! μεγάλο κουμπί.
 
 
 
Αποθηκεύστε το .less στο αρχείο άσκησης μας, συνδέστε το με το έγγραφο HTML και αποσυνδέστε το .πιο λιγο & & less.js αρχείου από το έγγραφο.
 
 .σκιά κουτί-σκιά: 0 1px 2px 0 # 555555; . διαχωριστικό style-border: solid; πλάτος συνόρου: 0 1px 0 1px; border-color: διαφανές # 444444 διαφανές # 888888;  .gradient φόντο: γραμμική κλίση (κορυφή, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%).  .Χωρίς αποτέλεσμα φόντο: γραμμική κλίση (κορυφή, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%).  @ γραμματοσειρά font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'). src: url ('fonts / Asap-Regular-webfont.eot? #iefix') μορφή ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.ttf') μορφή ('truetype'), μορφή url ('fonts / Asap-Regular-webfont.svg # AsapRegular') ('svg'); γραμματοσειρά-βάρος: κανονική. γραμματοσειρά: κανονικό;  σώμα φόντο: # a2a2a2; γραμματοσειρά-οικογένεια: AsapRegular, sans-serif; μέγεθος γραμματοσειράς: 11pt;  nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; ακτίνα ακτίνων: 3px; σύνορα: 1px στερεά # 505050; κουτί-σκιά: 0 1px 2px 0 # 555555;  nav ul padding: 0; περιθώριο: 0;  nav ul li εμφάνιση: inline;  nav ul li a κείμενο-διακόσμηση: κανένας; εμφάνιση: inline-block float: αριστερά. πλάτος: 156px; ύψος: 45px; κείμενο-ευθυγράμμιση: κέντρο; ύψος γραμμής: 300%. χρώμα: # f2f2f2; σκιά κειμένου: 1px 1px 0px # 000000; μεθοδικό στυλ: συμπαγές; πλάτος συνόρου: 0 1px 0 1px; border-color: διαφανές # 444444 διαφανές # 888888; υπόβαθρο: γραμμική κλίση (κορυφή, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%).  επίστρωση: περάστε φόντο: γραμμική κλίση (κορυφή, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%).  nav ul li: πρώτο-παιδί a border-left: none  nav ul li: last-child ένα border-right: none  
 
Ας ρίξουμε μια ματιά στο αποτέλεσμα για μια ακόμη φορά.
 
 
 
Και τελειώσαμε, παρακαλούμε να πειραματιστείτε με αυτό.
 
συμπέρασμα
 
Έχουμε μάθει πολλά πράγματα σχετικά με τη γλώσσα LESS σήμερα, όπως:
 

• Μεταβλητές.
• Mixins
• Παραμετρικές αναμείξεις
• Λειτουργίες
• Φρουροί Mixins
• Και τους κανόνες που έχουν ενσωματωθεί

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

• Διαδήλωση
• Λήψη πηγής