Cos’è Less CSS e come funziona?

LessJS è un pre-processore CSS ora è diventato un punto fermo nello sviluppo web. Include CSS semplici con funzioni di programmazione come Variabili. ¿ Qual è LessJS e come esso funziona ?

Funzioni o missaggio e operazione che consentono agli sviluppatori Web di creare stili CSS modulari, scalabili e più gestibili.

In questo post, discuteremo di LessJS, che è stato uno dei processori CSS più popolari ed è stato anche ampiamente implementato in numerosi framework front-end come Bootstrap .

Esploreremo anche le utilità di base , gli strumenti e le impostazioni per aiutarti a iniziare con MENO.

Cos'è Less CSS e come funziona? 1

Che cos’è LessJS e come funziona?

Il compilatore

Per iniziare, dovremo configurare un compilatore. La sintassi LESS non è standard, secondo la specifica W3C. Il browser non è stato in grado di elaborare e generare l’output, nonostante ereditasse funzionalità simili a CSS.

Ecco uno sguardo al codice MENO:

@ base colore: # 2d5e8b;
.class1 {
colore di sfondo: @ color-base;
.class2 {
colore di sfondo: #fff;
colore: @ base-color;
}
}

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

.class1 {
colore di sfondo: # 2d5e8b;
}
.class1 .class2 {
colore di sfondo: #fff;
colore: # 2d5e8b;
}

L’uso di JavaScript

LessJS viene fornito con un file less.js che è davvero facile da implementare sul tuo sito web. Crea un foglio di stile con l’estensione. less e collegalo nel tuo documento usando l’ attributo rel = “foglio di stile / less” .

<link rel = "foglio di stile / meno" type = "text / css" href = "main.less" />

Puoi ottenere il file JS qui, scaricarlo tramite il gestore di pacchetti Bower, altrimenti puoi collegarlo direttamente a CDN.

<link rel = "foglio di stile / meno" type = "text / css" href = "main.less" />
<script src = "// cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less .min.js"> </script>

Tutti sono configurati e possono comporre stili all’interno di .less . La sintassi LessJS verrà compilata al volo durante il caricamento della pagina.

Si prega di notare che l’uso di JavaScript non è raccomandato in fase di produzione, in quanto influenzerà seriamente le prestazioni del sito Web.

Cos'è Less CSS e come funziona? 2

L’uso della CLI LessJS

LESS fornisce un’interfaccia a riga di comando (CLI) nativa, lessc, che gestisce diverse attività oltre alla semplice compilazione della sintassi LessJS.

Utilizzando la CLI possiamo eliminare i codici , comprimere i file e creare una mappa di origine. Il comando si basa su Node.js che consente effettivamente al comando di funzionare su Windows, OS X e Linux.

npm installa -g meno

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

lessc style.less style.css

Utilizzare Task RunnerRunner

Taskes è uno strumento che automatizza le attività di sviluppo e i flussi di lavoro . Invece di eseguire il comando lessc ogni volta che vorremmo compilare i nostri codici.

Possiamo installare un esecutore di attività , configurarlo per vedere le modifiche nei nostri file LESS e compilare immediatamente LESS in CSS.

Uso dell’applicazione grafica

Per coloro che non sono abituati ad usare il Terminale e le linee di comando, possono optare per un’interfaccia grafica.

Ci sono molte applicazioni da compilare MENO oggi per tutte le piattaforme, alcune gratuite e altre a pagamento.

L’Editor di codice

Puoi usare qualsiasi editor di codice . Basta installare un componente aggiuntivo o un’estensione per evidenziare la sintassi MENO con i colori appropriati.

Una funzione che è ora disponibile per quasi tutti gli editor di codice e IDE, tra cui SublimeText, Notepad ++, VisualStudio, TextMate ed Eclipse, tra gli altri.

Sintassi di LessJS

A differenza del normale CSS, come lo conosciamo, LessJS funziona molto più come un linguaggio di programmazione. È dinamico, quindi aspettati di trovare alcune terminologie come Variabili, Funzionamento e Ambito lungo il percorso .

variabili

Daremo uno sguardo alle variabili. Se hai lavorato a lungo con CSS, probabilmente hai scritto qualcosa del genere, in cui abbiamo valori ripetitivi assegnati in blocchi di dichiarazione in tutto il foglio di stile.

.class1 {
colore di sfondo: # 2d5e8b;
}
.class2 {
colore di sfondo: #fff;
colore: # 2d5e8b;
}
.class3 {
bordo: 1px solido # 2d5e8b;
}

Questa pratica è davvero buona , fino a quando non siamo costretti a esaminare più di un migliaio o più frammenti simili lungo il foglio di stile.

Ciò può accadere quando viene creato un sito Web su larga scala . Il lavoro sarà noioso, se non stiamo usando un preprocessore CSS come LessJS.

L’istanza precedente non sarebbe un problema, possiamo usare le variabili . Le variabili ci consentiranno di memorizzare un valore costante che può quindi essere riutilizzato in tutto il foglio di stile.

@ base colore: # 2d5e8b;
.class1 {
colore di sfondo: @ color-base;
}
.class2 {
colore di sfondo: #fff;
colore: @ base-color;
}
.class3 {
bordo: 1px solido @ color-base;
}

Nell’esempio precedente, abbiamo memorizzato il colore # 2d5e8b nella variabile @ color-base . Quando vuoi cambiare il colore, dobbiamo solo cambiare il valore in questa variabile.

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

@ font-family: Georgia
@ punto-bordo: punteggiato
@transition: linear
@opacità: 0,5
 

Potrebbe interessarti

Lascia un commento