Less CSS Tutorial Progettazione di una barra di navigazione del menu rapido

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

Il mondo del Web design e dello sviluppo è in rapida evoluzione. Possiamo vederlo nel gran numero di nuove cose lanciate nella community (quasi) ogni giorno, sia che siano App o nuovi Framework che aiutano a rendere il nostro lavoro quotidiano come web designer o sviluppatori più efficace ed efficiente.

Uno che ha attirato la mia attenzione dall'evoluzione del web design oggi è LESS, un linguaggio di fogli di stile programmabile che estende il modo in cui scriviamo la sintassi CSS combinando alcuni concetti di programmazione come Variabili, Mixin, Funzioni e Operazioni.

Apre nuove funzionalità nella scrittura della sintassi CSS. Ad esempio, applicando i Mixin in CSS come avviene in un programma, ora possiamo memorizzare gli stili e i valori predefiniti che possono essere applicati nell'intero file quando possibile. Con questo, non avremo bisogno di scrivere gli stessi stili più e più volte.

Bene, facciamo degli esercizi con LESS per avere una visione migliore di ciò che ha da offrire.

Progettare con MENO

In questo tutorial cercheremo di progettare una barra di navigazione del menu scorrevole ispirata a quella di Apple.com. Poiché è solo "ispirato" al prodotto originale, tieni presente che il nostro prodotto tutorial finale non sarà esattamente uguale all'originale.

Per iniziare, potresti prima leggere le seguenti risorse utili. Spiegano alcune implementazioni di base del linguaggio LESS, che ti saranno utili prima di approfondire questo tutorial.

• MENO DI PIÙ: Rendi più semplice il tuo codice CSS con MENO
• Scrivi meglio CSS con meno
• Un'introduzione a LESS, e confronto a Sass

Preparazione

Prima di tutto, ci sono alcune cose essenziali di cui abbiamo bisogno per questo piccolo progetto, ovvero:

1. MENO Editor di testo

Avremo bisogno di un editor di testo per codificare il menu di navigazione. Tuttavia, la maggior parte degli editor di testo disponibili oggi sul mercato (come Dreamweaver, Notepad ++, InType, Sublime Text 2) devono ancora supportare .Di meno estensioni di file per impostazione predefinita, quindi la sintassi potrebbe non essere evidenziata bene.

Quindi, ai fini di questo tutorial, useremo uno speciale editor di testo per LESS chiamato ChrunchApp. Possiamo aprire e modificare .Di meno file di estensione e compilarlo in CSS statico usando questa applicazione. Poiché è un'applicazione Adobe Air, può essere installata in tutti i principali SO desktop (Win, OSX e Linux).

Per l'editor HTML puoi usare qualsiasi editor che stai già utilizzando ora. Personalmente mi piace Sublime Text 2.

2. Less.js

Successivamente, scarica la libreria JavaScript LESS dal loro sito Web ufficiale, la versione corrente è 1.2.1. Mettilo nella tua cartella pratica per questo.

Quindi collega il file al documento HTML.

3. Senza prefisso

Inoltre, utilizzeremo alcune funzionalità CSS3 per realizzare alcuni effetti nel menu di navigazione che includeranno i prefissi dei fornitori (-moz-, -o-, -webkit-) per renderlo correttamente attraverso diversi browser. Tuttavia, personalmente non preferisco usare i prefissi perché gonfierà il file CSS.

Per questo motivo, ho deciso di utilizzare prefix-free, una libreria JavaScript creata da Lea Verou che gestirà automaticamente i prefissi del venditore in background. Quindi dovremo solo scrivere la sintassi ufficiale dal W3C.

Scarica il file e collegalo al file HTML.

Va bene, siamo tutti istituiti; ora iniziamo a strutturare il markup HTML.

Markup HTML

La navigazione è abbastanza semplice. Avrà cinque menu racchiusi in un tag elenco non ordinato. Apri il tuo editor HTML preferito e inserisci il seguente markup:

MENO Styling

In questa sezione inizieremo lo styling della navigazione con la lingua LESS. Per chi è nuovo al linguaggio di programmazione, scrivere la sintassi CSS con LESS si sentirebbe un po 'strano e imbarazzante. Ma non ti preoccupare, una volta che hai un po 'di pratica, sarà sicuramente più divertente del modo in cui scriviamo puro CSS (è la mia esperienza, è anche un po' coinvolgente).

Esaminiamo lo stile di navigazione dalla nostra fonte di ispirazione.

Come possiamo vedere nello screenshot qui sopra, la navigazione Apple.com ha i seguenti 6 stili comuni principali:

• ombra
• confine
• divisore
• gradienti
• effetto hover
• testo

Conserveremo questi stili e li salveremo all'interno config.less come stile predefinito Configurazione; alcuni designer potrebbero anche nominarlo lib.css quello rappresenta Biblioteca. Collega questo file al nostro documento.

Assicurati di posizionarlo prima della libreria JavaScript LESS.

Definisci la base colore con le variabili

In questo passaggio definiremo la base del colore di navigazione usando Variabili. La variabile in LESS è dichiarata usando il @ simbolo.

@theme: # 555;

Questo @tema variabile è il nostro colore standard; lo useremo in ogni modo possibile per ottenere uno schema cromatico perfetto e in modo che la composizione del colore sia destinata a diventare più coerente.

Definisci lo stile dell'ombra predefinito con Mixins

Una delle caratteristiche che amo di LESS è Mixins. È un concetto di programmazione che memorizza diversi stili predefiniti che in LESS possono essere ereditati in classi o id in seguito nel foglio di stile.

.shadow box-shadow: 0 1px 2px 0 @theme; 

Nel codice sopra non ho incluso la versione prefissata del box-ombra proprietà, poiché la libreria priva di prefissi li gestirà automaticamente. Inoltre, il colore dell'ombra è ereditato dal colore variabile del tema.

Definisci lo stile del bordo con i mixin parametrici

La barra di navigazione avrà bisogno di un colore del bordo distinto con un angolo leggermente arrotondato. Possiamo compilare lo stile del bordo usando i Mixet parametrici. In realtà ha le stesse funzionalità di Mixins, l'unica differenza è che ha anche parametri modificabili, quindi i valori sono più regolabili.

.border (@radius: 3px) border-radius: @radius; border: 1px solid @theme - # 050505; 

Nel codice sopra, abbiamo impostato il bordo predefinito @raggio per 3px e come detto prima, questo valore può essere modificato in seguito.

Definisci Gradiente, Divisore e Stile al passaggio del mouse con Operazione

L'operazione è semplicemente un linguaggio di programmazione in cui possiamo applicare una formula matematica come Addizione, Divisione, Sottrazione e Moltiplicazione per ottenere il risultato desiderato. Diamo un'occhiata al seguente codice:

.divisore border-style: solido; border-width: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

Nel codice sopra abbiamo sottratto @tema variabile da # 111, in questo modo l'output del colore del bordo sinistro sarebbe un po 'più scuro. Mentre il colore del bordo destro è derivato dall'aggiunta di @tema variabile con colore esadecimale # 333, l'uscita sarebbe più leggera.

Livello di schema di colori

Bene, per alcuni di voi che potrebbero essere confusi con le formule, esaminiamo lo schema dei colori qui sotto per ottenere una migliore comprensione:

Il massimo tono scuro è # 000 (nero), mentre il tono di luce massimo è #F F F (bianco) e la nostra attuale base di colori è # 555. Quindi, se vogliamo che la base di colore sia 3 livelli più scuri dalla corrente, possiamo semplicemente sottrarlo # 333. Lo stesso modo può essere applicato anche per schiarire il colore.

Successivamente, opereremo il colore del gradiente.

.gradient background: gradient-linear (in alto, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: gradient lineare (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definisci lo stile del testo con i missili Guard

Abbiamo in programma di avere 2 colori sulla barra di navigazione, ne colore scuro e una luce. Applichiamo due istruzioni condizionali per il testo usando Guard Mixins.

Innanzitutto, quando al testo viene assegnato un colore con una luminosità uguale o superiore al 50%, il colore text-shadow dovrebbe diventare scuro, in questo caso il colore # 000000.

.textcolor (@txtcolor) when (lightness (@txtcolor)> = 50%) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Quindi, quando al testo viene dato un colore che la luminosità è inferiore al 50% text-shadow diventerà bianco.

.textcolor (@txtcolor) when (lightness (@txtcolor) 
Importazione MENO
 
Creiamo ora un altro .Di meno file chiamato styles.less e importa config.less dentro:
 
@import "config.less";
 
Aggiungi famiglia di caratteri
 
Affinché la barra di navigazione appaia più attraente, includeremo una nuova famiglia di caratteri @ Font-face regola. sorprendentemente, @ Font-face la regola è già supportata da IE6!
 
Questa volta useremo il font Asap. Scaricalo dalla collezione di font di Font Squirrel. Quindi inserisci i seguenti stili nella nostra creazione recente styles.less file.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fonts / Asap-Regular-webfont.eot'); formato src: url ('fonts / Asap-Regular-webfont.eot? #iefix') ('embedded-opentype'), formato url ('fonts / Asap-Regular-webfont.woff') ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; stile carattere: normale;  
 
Disegnare il corpo con le funzioni di colore
 
Ora, daremo un colore di sfondo al corpo (che dovrebbe essere più chiaro della base colore) e specificare la famiglia di caratteri e le dimensioni del carattere. Possiamo avvicinarci all'effetto usando le funzioni Colore:
 
Il seguente codice alleggerirà lo sfondo al 30%.
 
body background: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; font-size: 11pt; 
 
 
 
Disegnare la navigazione con la regola nidificata
 
In MENO siamo in grado di nidificare gli stili direttamente sotto il suo genitore. Diamo un'occhiata al codice qui sotto.
 
Il nav il tag che contiene tutti gli elementi necessari per la navigazione avranno i seguenti stili.
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; 
 
Si noti che, invece di dare nuovamente un mazzo di regole CSS, ho inserito solo .confine dare lo stile del confine e .ombra aggiungere ombra. In casi reali, questi set di classi possono essere riutilizzati anche in un altro elemento, ovunque sia necessario.
 
 
 
Successivamente, diamo stili per il ul dentro il nav avere zero padding e margine. Non molto tempo fa ci avvicineremo allo stile scrivendo qualcosa del genere:
 
nav ... nav ul ...
 
Non c'è niente di sbagliato in questo approccio, infatti, lo facevo ogni volta e mi trovavo a mio agio. Tuttavia, questo metodo, come ha affermato un designer CSS, è descritto e in alcuni casi non facilmente gestibile.
 
Ora possiamo fare qualcosa del genere:
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; ul padding: 0; margine: 0; 
 
 
 
E poi il menu verrà visualizzato in fila usando display: in linea proprietà.
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; ul padding: 0; margine: 0; li display: inline; 
 
 
 
Nella sintassi seguente, specifichiamo lo stile del tag di ancoraggio del menu e aggiungiamo i nostri stili predefiniti, quelli sono: .colore del testo, .divisore, .pendenza.
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; ul padding: 0; margine: 0; li display: inline; a decorazione del testo: nessuna; display: blocco in linea; float: a sinistra; larghezza: 156 px; altezza: 45 px; allineamento del testo: centro; altezza della linea: 300%; .textcolor (# f2f2f2); // Puoi cambiare questa linea .divider; .pendenza; 
 
Nel codice qui sopra applichiamo il colore esadecimale # f2f2f2 in cui la luminosità è considerata superiore al 50%, quindi ci aspetteremmo di vedere l'ombra diventare scura (automaticamente). Il resto del codice sono sicuro che è abbastanza auto-esplicativo.
 
 
 
Tuttavia, se guardiamo al risultato attuale sopra, ognuno dei menu sta avendo dei divisori, con il risultato che l'ultima sezione trabocca verso il basso. Quindi dobbiamo omettere lo stile del bordo per il primo e l'ultimo figlio della barra di navigazione.
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; ul padding: 0; margine: 0; li display: inline; a decorazione del testo: nessuna; display: blocco in linea; float: a sinistra; larghezza: 156 px; altezza: 45 px; allineamento del testo: centro; altezza della linea: 300%; .textcolor (# f2f2f2); // Puoi cambiare questa linea .divider; .pendenza;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Hover State
 
Per l'ultimo passaggio aggiungeremo l'effetto hover. In MENO possiamo aggiungere pseudo-elemento ad esempio : hover utilizzando & simbolo.
 
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .confine; .ombra; ul padding: 0; margine: 0; li display: inline; a decorazione del testo: nessuna; display: blocco in linea; float: a sinistra; larghezza: 156 px; altezza: 45 px; allineamento del testo: centro; altezza della linea: 300%; .textcolor (# f2f2f2); // Puoi cambiare questa linea .divider; .pendenza; &: hover .hovereffect;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Cambia il tema del colore
 
Ecco la parte interessante di LESS. Se vogliamo cambiare il tema generale del colore, possiamo farlo con un numero inferiore di cambi di riga rispetto a quello che ci serve in puro CSS.
 
In questo caso, cambierò il colore di navigazione per essere un po 'più leggero. Basta cambiare le seguenti due righe.
 
@theme: #ccc; //Cambia questo
 
.textcolor (# 555); //E questo
 
E questo è il risultato.
 
 
 
Compila meno nei CSS
 
Quando stiamo ancora usando il JavaScript LESS, si prenderà il .Di meno file e tradurlo in CSS statico in modo che il browser standard possa interpretarlo. Questo è un doppio lavoro nel lato client, per non parlare della larghezza di banda ridondante e sprecata. Il punto principale di LESS è nel flusso di lavoro per semplificare la nostra pratica nella compilazione di CSS statici per essere più dinamici e programmabili.
 
Quindi, quando stiamo per mettere la barra di navigazione in diretta su un sito Web, è importante compilare il file LESS in CSS statico.
 
Clicca il Crunch It! grande bottone.
 
 
 
Salva il .less nel nostro file di esercitazione, collegalo al documento HTML e scollega il .Di meno & less.js file dal documento.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; border-width: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888;  .gradient background: gradiente lineare (in alto, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: gradiente lineare (in alto, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); formato src: url ('fonts / Asap-Regular-webfont.eot? #iefix') ('embedded-opentype'), formato url ('fonts / Asap-Regular-webfont.woff') ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; stile carattere: normale;  body background: # a2a2a2; font-family: AsapRegular, sans-serif; font-size: 11pt;  nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; border-radius: 3px; border: 1px solid # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; margine: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; display: blocco in linea; float: a sinistra; larghezza: 156 px; altezza: 45 px; allineamento del testo: centro; altezza della linea: 300%; colore: # f2f2f2; text-shadow: 1px 1px 0px # 000000; border-style: solido; border-width: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888; sfondo: gradiente lineare (in alto, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover background: gradiente lineare (in alto, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul: last-child a border-right: none;  
 
Diamo un'occhiata al risultato ancora una volta.
 
 
 
E abbiamo finito, sentitevi liberi di sperimentarlo.
 
Conclusione
 
Abbiamo imparato molte cose sulla lingua LESS oggi, come ad esempio:
 

• variabili.
• mixins
• Mixin parametrici
• operazioni
• Mixin custoditi
• E regole nidificate

Sebbene ci siano molte cose che possono essere coperte ulteriormente e molte possibilità da mostrare e spiegare, ci auguriamo che questo tutorial di base ti sia piaciuto.

• dimostrazione
• Fonte di download