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ù gestibili .

In questo post, esamineremo LESS, che è stato uno dei pre-processori CSS più popolari in circolazione, ed è stato anche ampiamente utilizzato in numerosi framework di front-end come Bootstrap. Verranno inoltre illustrate le utilità, gli strumenti e le impostazioni di base per aiutarti a iniziare e utilizzare 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:

Utilizzando JavaScript

LESS viene fornito con un file less.js che è davvero facile da implementare nel tuo sito web. Crea un foglio di stile con estensione .less e .less nel tuo documento usando l' rel="stylesheet/less" .

È 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 del .less . La sintassi LESS verrà compilata al volo mentre la pagina viene caricata. Tieni presente che l' uso di JavaScript è sconsigliato in fase di produzione in quanto influirà negativamente sulle prestazioni del sito web .

Dovresti sempre compilare la sintassi LESS in anticipo e servire solo i normali CSS . È possibile utilizzare Terminal, un Runner di attività come Grunt o Gulp o un'applicazione grafica per farlo.

Utilizzo della CLI

LESS fornisce un'interfaccia della 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 comando lessc 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. Anziché eseguire il comando lessc 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 trattano 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 scelga (oltre a JavaScript) non ha importanza, francamente, fintanto che lo strumento funziona e completa il tuo flusso di lavoro, fallo.

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 Variables, Operation e Scope .

variabili

Prima di tutto, diamo un'occhiata alle 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 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 memorizzare un valore costante che in seguito potrà 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 nella variabile @color-base . Quando vuoi cambiare il colore, abbiamo solo bisogno di cambiare il valore in questa variabile.

A parte il 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 per riutilizzare intere dichiarazioni in una serie di regole CSS in un'altra serie di regole. Ecco un esempio:

 .gradients {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 colore sfumato predefinito all'interno della classe .gradients . Ogni volta che vogliamo aggiungere i gradienti semplicemente inseriamo gli .gradients questo modo:

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

Il .box erediterà tutto il blocco di dichiarazione all'interno di .gradients . 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 usando molto CSS3 nel tuo sito web, puoi usare LESS Elements per rendere il tuo lavoro molto più semplice. LESS Elements è una raccolta di comuni Mixin CSS3 che possiamo usare spesso in fogli di stile, come border-radius, gradients, drop-shadow e così via.

Per usare LESS Elements, aggiungi semplicemente la regola @import nel tuo foglio di stile LESS, ma non dimenticarti di scaricarlo prima e aggiungerlo alla tua directory di lavoro.

 @import "elements.less"; 

Ora possiamo riutilizzare tutte le classi fornite dagli elements.less . Ad esempio, per aggiungere 3px border radius a un 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 principio delle "migliori pratiche".

In LESS CSS, possiamo semplificare le serie di regole annidando gli elementi figli 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, come :hover, al selettore usando il simbolo e commerciale (&).

Diciamo che vogliamo aggiungere :hover passa il :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 MENO, come addizione, sottrazione, moltiplicazione e divisione in 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, prima memorizziamo il valore nella variabile @height, 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 nella variabile @height, l' elemento B avrà sempre il doppio dell'altezza.

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

Scopo

MENO applica il concetto Scope, dove le variabili verranno ereditate per prime dall'ambito locale e quando non è disponibile localmente, cercherà in un ambito più ampio.

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

Nell'esempio sopra, l' header ha un colore di sfondo nero, ma il colore di sfondo di nav sarà blu in quanto ha la variabile @color nel suo ambito locale, mentre l' a avrà anche il blu che è 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 invito a cercare per 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 funzionalità CSS LESS che dovresti conoscere