Meno CSS - Guida per principianti

Il pre-processore CSS è diventato ormai un punto fermo nello sviluppo web. Fornisce semplici CSS con tratti di programmazione come Variabili, Funzioni o Mixin e Operazione che consentono agli sviluppatori web di creare stili CSS modulari, scalabili e più maneggevoli.

In questo post, esamineremo LESS, che è stato uno dei pre-processori CSS più popolari in circolazione, ed è stato anche ampiamente implementato in numerosi framework di front-end come Bootstrap. Cammineremo anche attraverso il utilità di base, strumenti e impostazioni per aiutarti a iniziare e a funzionare con LESS.

Il compilatore

Per cominciare, avremo bisogno di impostare un compilatore. La sintassi LESS è non standard, secondo le specifiche W3C. Il browser non sarebbe in grado di elaborare e rendere l'output, nonostante erediti tratti simili ai CSS.

Ecco uno sguardo al codice LESS:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; colore: @ color-base;

Il compilatore elaborerà il codice e trasformerà la sintassi di LESS in un formato CSS compatibile con il browser:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; colore: # 2d5e8b;

Esistono numerosi strumenti per compilare i CSS:

Usare JavaScript

MENO arriva con a less.js file che è davvero facile da implementare nel tuo sito web. Crea un foglio di stile con .Di meno estensione e collegarlo nel tuo documento usando il rel = "stylesheet / meno" attributo.

È possibile ottenere qui il file JS, scaricarlo tramite il gestore dei pacchetti Bower, altrimenti collegarsi direttamente a CDN, in questo modo:

Siete tutti impostati e potete comporre gli stili all'interno di .Di meno. La sintassi LESS verrà compilata al volo mentre la pagina viene caricata. Tieni presente che l'utilizzo di JavaScript è sconsigliato in fase di produzione in quanto influirà in modo negativo sulle prestazioni del sito Web.

Dovresti sempre compilare la sintassi LESS prima e solo servire regolarmente CSS anziché. Puoi usare terminale, un corridore di attività come Grugnito o Sorso, o un'applicazione grafica per farlo.

Utilizzo della CLI

LESS fornisce un'interfaccia a riga di comando nativa (CLI), lessc, che gestisce diversi compiti oltre alla semplice compilazione della sintassi LESS. Usando la CLI possiamo filtrare i codici, comprimere i file e creare una mappa sorgente. Il comando è basato su Node.js che consente al comando di funzionare efficacemente su Windows, OS X e Linux.

Assicurati che Node.js sia stato installato (altrimenti prendi il programma di installazione qui), quindi installa LESS CLI tramite NPM (Node Package Manager) usando la seguente riga di comando.

 npm install -g less

Ora hai il lessc comando a tua disposizione per compilare LESS in CSS:

 lessc style.less style.css

Utilizzo di Task Runner

Task runner è uno strumento che automatizza attività di sviluppo e flussi di lavoro. Piuttosto che eseguire il lessc comando ogni volta che vorremmo compilare i nostri codici, possiamo installare installare un task runner e impostarlo per osservare le modifiche all'interno dei nostri file LESS e compilare immediatamente LESS nei CSS.

Due strumenti popolari in questa categoria oggi sono Grunt e Gulp. Abbiamo una serie di post che coprono questi strumenti. Controlla i post per sapere come implementare questi strumenti nel tuo flusso di lavoro.

Come usare Grunt per automatizzare il tuo flusso di lavoro
Guida introduttiva a Gulp.js
The Battle Of Build Scripts: Gulp Vs Grunt

Utilizzando l'applicazione grafica

Per coloro che potrebbero non essere abituati ad usare Terminale e linee di comando, possono invece optare per un'interfaccia grafica. Ci sono un sacco di applicazioni per compilare MENO oggi per tutte le piattaforme - alcune gratuite, alcune a pagamento

Ecco la lista completa:

App	piattaforma	Costo
Miscela	OS X / Windows	Gratuito
Koala	OS X / Windows / Linux	Gratuito
Prepros	OS X / Windows	Freemium (USD29)
senza vittorie	finestre	Gratuito
CodeKit	OS X	USD32

Quale compilatore tu opti per (oltre a JavaScript) non importa, francamente, fintanto che lo strumento funziona e completa il tuo flusso di lavoro, vai a farlo.

L'editor di codice

Puoi usare qualsiasi editor di codice. Basta installare un plug-in o un'estensione per evidenziare la sintassi di LESS con i colori appropriati, una funzionalità che è ora disponibile per quasi tutti gli editor di codice e gli IDE tra cui SublimeText, Notepad ++, VisualStudio, TextMate ed Eclipse per citarne alcuni.

Ora che abbiamo impostato il compilatore e l'editor di codice, possiamo iniziare a scrivere stili CSS con la sintassi LESS.

MENO sintassi

A differenza dei normali CSS come lo conosciamo, LESS funziona molto più come un linguaggio di programmazione. È dinamico, quindi aspettati di trovare alcuni termini come variabili, operazione e Scopo lungo la strada.

variabili

Prima di tutto, diamo un'occhiata al variabili.

Se hai lavorato parecchio con i CSS, probabilmente hai scritto qualcosa del genere, in cui abbiamo assegnato valori ripetitivi in blocchi di dichiarazione nell'intero foglio di stile.

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; colore: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

Questa pratica in realtà va bene - finché non ci troviamo a dover setacciare più di un migliaio o più di frammenti simili in tutto il foglio di stile. Questo potrebbe accadere quando si costruisce un sito Web su larga scala. Il lavoro diventerà noioso.

Se stiamo usando un pre-procesor CSS come LESS, l'istanza di cui sopra non sarebbe un problema - possiamo usare variabili. Le variabili ci permetteranno di archiviare una costante valore che in seguito può essere riutilizzato nell'intero foglio di stile.

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; colore: @ color-base;  .class3 border: 1px solid @ color-base;

Nell'esempio sopra, memorizziamo il colore # 2d5e8b nel @ Colore-base variabile. Quando vuoi cambiare il colore, abbiamo solo bisogno di cambiare il valore in questa variabile.

Oltre al colore, puoi anche inserire altri valori nelle variabili come ad esempio:

 @ font-family: Georgia @ dot-border: punteggiato @transition: linear @opacity: 0.5

mixins

In LESS, possiamo usare mixins riutilizzare intere dichiarazioni in una serie di regole CSS in un'altra serie di regole. Ecco un esempio:

 .gradienti background: #eaeaea; sfondo: gradiente lineare (in alto, #eaeaea, #cccccc); background: -o-linear-gradient (in alto, #eaeaea, #cccccc); background: -ms-linear-gradient (in alto, #eaeaea, #cccccc); background: -moz-linear-gradient (in alto, #eaeaea, #cccccc); background: -webkit-linear-gradient (in alto, #eaeaea, #cccccc);

Nel frammento di cui sopra, abbiamo preimpostato un valore predefinito pendenza colore dentro il .gradienti classe. Ogni volta che vogliamo aggiungere i gradienti, semplicemente inseriamo il .gradienti per di qua:

 div .gradients; border: 1px solid # 555; border-radius: 3px;

Il .scatola erediterà tutto il blocco di dichiarazione all'interno del .gradienti. Quindi, la regola CSS sopra è uguale al seguente semplice CSS:

 div background: #eaeaea; sfondo: gradiente lineare (in alto, #eaeaea, #cccccc); background: -o-linear-gradient (in alto, #eaeaea, #cccccc); background: -ms-linear-gradient (in alto, #eaeaea, #cccccc); background: -moz-linear-gradient (in alto, #eaeaea, #cccccc); background: -webkit-linear-gradient (in alto, #eaeaea, #cccccc); border: 1px solid # 555; border-radius: 3px;

Inoltre, se stai utilizzando molto CSS3 nel tuo sito web, puoi usare LESS Elements per rendere il tuo lavoro molto più semplice. LESS Elements è una raccolta di elementi comuni CSS3 Mixins che possiamo usare spesso in fogli di stile, come ad esempio border-radius, gradienti, drop-ombra e così via.

Per usare MENO elementi, aggiungi semplicemente il @importare regola nel tuo foglio di stile MENO, ma non dimenticare di scaricarlo prima e aggiungerlo alla tua directory di lavoro.

 @import "elements.less";

Ora possiamo riutilizzare tutto il classi fornito dal elements.less, per esempio, per aggiungere 3px raggio di confine a a div, possiamo scrivere:

 div .rounded (3px);

Per ulteriore utilizzo, fare riferimento alla documentazione ufficiale.

Regole nidificate

Quando si scrivono stili in semplici CSS, è possibile che si siano verificate anche queste tipiche strutture di codice.

 nav height: 40px; larghezza: 100%; sfondo: # 455868; border-bottom: 2px solid # 283744;  nav li width: 600px; altezza: 40px;  nav li a color: #fff; altezza della linea: 40px; text-shadow: 1px 1px 0px # 283744;

In un semplice CSS, selezioniamo gli elementi figlio selezionando prima il genitore in ogni serie di regole, che è notevolmente ridondante se seguiamo il “migliori pratiche” principio.

In LESS CSS, possiamo semplificare le serie di regole di annidando gli elementi del bambino all'interno dei genitori, come segue;

 nav height: 40px; larghezza: 100%; sfondo: # 455868; border-bottom: 2px solid # 283744; li larghezza: 600px; altezza: 40px; a color: #fff; altezza della linea: 40px; text-shadow: 1px 1px 0px # 283744;

Puoi anche assegnare pseudo-classi, piace : hover, al selettore usando il simbolo e commerciale (&).

Diciamo che vogliamo aggiungere : hover al tag di ancoraggio sopra, possiamo scrivere in questo modo:

 a color: #fff; altezza della linea: 40px; text-shadow: 1px 1px 0px # 283744; &: hover background-color: # 000; colore: #fff;

operazione

Possiamo anche eseguire operazioni in LESS, come ad esempio addizione, sottrazione, moltiplicazione e divisione a numeri, colori e variabili nel foglio di stile.

Diciamo che vogliamo che l'elemento B sia due volte più alto dell'elemento A. In tal caso, possiamo scrivere in questo modo:

 @height: 100px .element-A height: @height;  .element-B height: @height * 2;

Come puoi vedere sopra, per prima cosa memorizziamo il valore nel @altezza variabile, quindi assegna il valore all'elemento A.

Nell'elemento B, piuttosto che calcolare noi stessi l'altezza, possiamo moltiplicare l'altezza per 2 usando l'operatore asterisco (*). Ora, ogni volta che cambiamo il valore nel @altezza variabile, elemento B avrà sempre il doppio dell'altezza.

Scopri esempi di operazioni più avanzate nel nostro precedente tutorial: Progettazione di una barra di navigazione del menu scorrevole.

Scopo

MENO applica il Scopo concetto, in cui le variabili verranno ereditate per prime dall'ambito locale e quando non è disponibile localmente, eseguirà una ricerca in un ambito più ampio.

 header @color: black; background-color: @color; nav @color: blue; background-color: @color; a color: @color;

Nell'esempio sopra, il intestazione ha un nero colore di sfondo, ma navIl colore di sfondo sarà blu in quanto ha la variabile @color nel suo ambito locale, mentre il un avrà anche il blu che viene ereditato dal suo genitore più vicino, nav.

Pensiero finale

In definitiva, speriamo che questo post possa darti una comprensione di base su come possiamo scrivere CSS in modo migliore usando LESS. All'inizio forse ti senti un po 'imbarazzante, ma mentre lo provi più spesso, diventerà sicuramente molto più semplice.

Ecco un paio di tutorial che ti incoraggio a cercare ulteriori suggerimenti e pratiche, che possono aiutarti a spingere le tue abilità LESS fino al livello successivo.

Less CSS Tutorial: progettare una barra di navigazione del menu scorrevole
Comprensione delle funzioni di colore MENO
3 Nuove caratteristiche CSS LESS che dovresti conoscere