LESS è un preprocessore CSS amichevole e facilmente accessibile. Sebbene in definitiva, Sass e Stylus siano più potenti e robusti, MENO ha un certo fascino che lo mantiene come un precursore nella battaglia dei preprocessori.
Se sei un fan di Sass, allora puoi trarre vantaggio da Compass, un incredibile framework che semplifica la codifica con le complesse proprietà CSS3. Ma che dire degli utenti di LESS? Dov'è la loro bussola? Oggi esamineremo tre fantastiche librerie di mixin che aiuteranno a riempire quel vuoto.
Qual è l'accordo con MENO?
Se sei uno dei programmatori CSS che è ancora all'esterno, cerca nei preprocessori CSS ma non sai se sei abbastanza abile da usarne uno, LESS è un ottimo punto di partenza.
La prima cosa da tenere a mente è che i preprocessori effettivamente realizzano la codifica Più facileanche se sembrano inizialmente una grossa complicanza. Per iniziare, vai sul sito web LESS e scarica less.js.
Ora crea un foglio di stile .less (proprio come un foglio di stile .css, solo con un'estensione diversa) e inseriscilo nel tuo HTML come qualsiasi altro foglio di stile. Assicurati anche di inserire il file JavaScript.
? Il file JavaScript si prenderà automaticamente cura di trasformare il tuo codice LESS in CSS che il browser può leggere.Questo è tutto! Era indolore, giusto? Ora vai avanti e scrivi CSS come faresti sempre in quel file .less, e inizia gradualmente a giocare con le fantastiche funzioni di LESS come le variabili e i mix. Il file JavaScript si prenderà automaticamente cura di trasformare il tuo codice LESS in CSS che il browser può leggere.
Ora, la cosa da ricordare è che il file less.js è a scopo di test. Quando sei pronto a prendere realmente questo sucker dal vivo, rilascia il tuo .less file in Less.app o qualche equivalente e sputerà un semplice vecchio file CSS. Quel file CSS vaniglia è quello che dovresti usare nella bozza finale.
Tieni i tuoi file LESS in giro però, mentre li aggiorni, Less.app aggiornerà anche il tuo file CSS. È davvero un flusso di lavoro molto semplice. Fai un tentativo, è molto più facile di quanto pensi.
Che dire di Sass?
Se sei un utente Sass, congratulazioni, lo sono anch'io. Tuttavia, questo post non è pensato per essere un dibattito LESS vs. Sass quindi basta accarezzarti sulla schiena e andare avanti invece di lasciarmi un sacco di commenti anti-LESS.
MENO Mixin
Una delle migliori caratteristiche di qualsiasi preprocessore CSS è la possibilità di creare mixin, che ti permettono di legare un gruppo di proprietà e valori personalizzabili in un unico piccolo pacchetto.
Ecco un esempio:
Questo prende tutto il codice box-shadow e lo avvolge piacevolmente in un singolo mixin che può essere implementato con valori personalizzati (o le impostazioni predefinite che abbiamo usato sopra). Ora, invece di scrivere un enorme pezzo di codice ogni volta che vuoi un box-shadow, questo è tutto ciò di cui hai bisogno:
Piuttosto fantastico, vero? Quando questo codice è compilato, sputerà come semplice vecchio CSS. Ottieni una base di codice molto più leggibile e facilmente aggiornabile senza sacrificare la compatibilità del browser.
Risparmia tempo con le librerie Mixin
Come puoi immaginare, ci sono un sacco di possibili mix che quasi tutti i programmatori CSS potrebbero trarre vantaggio dall'uso. Il CSS3 è pieno di codice gonfiato, ridondante, pieno di prefissi che è decisamente un dolore da scrivere. Alcuni mix pre-fab per tutte queste sciocchezze potrebbero fare molto per risparmiare un sacco di tempo e problemi durante la creazione di siti web.
"Il CSS3 è pieno di codice gonfiato, ridondante, pieno di prefissi che è decisamente un dolore da scrivere."Fortunatamente, ci sono molte persone nella comunità di sviluppo web che hanno lavorato proprio a questo progetto. Come ho accennato nell'introduzione, Compass è l'ultima risorsa per gli utenti di Sass, ma solo perché non esiste una versione di Compass per LESS non significa che devi perderlo. Ci sono alcune librerie di mixaggio LESS davvero grandi là fuori che aspettano solo di saltare a bordo. Diamo un'occhiata a pochi.
MENO Elementi
LESS Elements è stata una delle prime librerie di mixin LESS solide che ho trovato. In verità, è piuttosto semplice, ma è un posto decente per iniziare:
Mixins inclusi
Gli elementi di LESS vengono con quindici mixin precostruiti (ancora, molto di base). Ecco cosa è incluso:
- .pendenza
- .BW gradiente
- .bordered
- .Drop-ombra
- .rounded
- .border raggio
- .opacità
- .durata della transizione
- .rotazione
- .scala
- .transizione
- .Ombra interiore
- .box-ombra
- .COLONNE
- .tradurre
Come puoi vedere, molte delle complessità standard di CSS3 sono trattate qui: gradienti, ombre, persino transizioni.
Sintassi
La sintassi qui è abbastanza semplice, tutti seguono le convenzioni delle normali proprietà CSS. Come con tutti i mixaggi di LESS, sono implementati tramite la sintassi del periodo, quindi sembra che tu stia annidando una classe all'interno di una classe.
Critica
LESS Elements era un grande progetto che aveva un grande potenziale, ma non ha mai veramente capito quel potenziale. Se, come me, sei effettivamente abituato alla straordinaria combinazione di Sass e Compass, LESS Elements si sente minuscolo al confronto. C'è così tanto non è qui che è difficile entusiasmarsi per quello che è.
? C'è così tanto non è qui che è difficile entusiasmarsi per quello che è.Detto questo, ci sono un sacco di programmatori là fuori che preferiscono la semplicità e non hanno davvero bisogno della peluria extra, quindi questo potrebbe ancora piacere a quella folla.
Al di là del fatto che LESS Elements è così basilare è la sfortunata verità che, per quanto posso dire, non è stata toccata in un anno. Dato che i CSS si stanno ancora evolvendo man mano che vengono implementate nuove funzionalità e le funzionalità meno recenti raggiungono finalmente lo stato di cross-browser, c'è molto pericolo nel basare il tuo flusso di lavoro su uno strumento che è di per sé stagnante.
Alla fine, c'è stato un grande lavoro qui, ma penso che possiamo fare di meglio.
MENO cappello
Le persone straordinarie che ci hanno portato CSS Hat hanno appena rilasciato LESS Hat, una libreria LESS impressionante e moderna. Dopo essersi guardati intorno, non sono riusciti a trovare una fonte decente per i mixin LESS, così hanno fatto da soli!
Mixins inclusi
Ci sono diciannove mixin inclusi con LESS Hat, con keyframes (il ventesimo) in arrivo. Come puoi vedere, copre praticamente tutto ciò che abbiamo visto in LESS Elements e molto altro:
- .animazione
- .keyframes (presto disponibile)
- .aspetto
- .backface visibilità
- .Background-clip
- .Background origine
- .Background-size
- .border raggio
- .border-image
- .box-ombra
- .box-dimensionamento
- .COLONNE
- .font-face
- .pendenza
- .opacità
- .prospettiva
- .taglia
- .trasformare
- .transizione
- .user-select
In realtà, sono così orgogliosi del loro set di funzionalità che non hanno paura di confrontarlo con LESS Elements e persino con Compass.
Come puoi vedere, MENO Hat è praticamente le ginocchia delle api. I punti di forza che amerai includono la possibilità di implementare più gradienti senza preoccuparsi di sintassi più vecchie, ombre illimitate, trasformazioni 3D e persino supporto per font-face.
Sintassi
La sintassi per LESS Hat è in realtà un po 'strana. Noterete questo in particolare su tutte le proprietà in cui è possibile implementare più istanze di una proprietà, ad esempio con più ombre.
Come puoi vedere, hai le virgolette e il simbolo ~ da trattare oltre alla tipica sintassi parentetica. Cosa sta succedendo qui?
La risposta è piuttosto complicata. Si riduce al fatto che LESS stesso non suona così bene con la sintassi per includere più istanze di proprietà. Per far fronte a questo, prendono l'input come stringa di escape e quindi lo analizzano all'interno di ogni mixin. Puoi leggere di più su questo qui.
Critica
MENO Hat rappresenta una delle migliori risorse LESS di terze parti che ho visto fino ad oggi. Un grande sforzo è stato messo qui e il risultato è davvero qualcosa che è fantastico. Se i ragazzi di CSS Hat ti tengono d'occhio, questo potrebbe diventare un must per gli utenti di LESS.
Le critiche qui sono state già ampiamente trattate. Sarebbe bello vedere il supporto dei keyframe, ma dovrebbe arrivare presto, quindi questo non sarà un problema a lungo termine. La sintassi riduce la natura user-friendly di LESS, ma sembra essere un male necessario se si desidera il tipo di set di funzionalità offerto da LESS Hat.
Twitter Bootstrap e Preboot
Twitter Bootstrap è un framework front-end molto popolare nato dal fantastico lavoro dello sviluppatore di Twitter Mark Otto. Al suo interno, Bootstrap è costruito e gestito su una base LESS, non puro CSS.
Dato che Bootstrap è un insieme di strumenti incredibilmente vasto e incredibilmente vasto, questo lo rende una delle più impressionanti raccolte di risorse LESS mai costruite.
Che dire di Preboot?
Storicamente, Mark Otto ha lavorato a un progetto chiamato Preboot.less, che era una raccolta di mix LESS. Questo progetto si è evoluto e è stato lanciato in Bootstrap, anche se quindi guardate lì (Mark ha confermato per me che Preboot è ora un progetto stagnante).
Bootstrap & LESS
Vuoi dei file MENO? Li hai. Al momento Bootstrap include ben quaranta file .less, che controllano tutti i suoi vari aspetti e caratteristiche.
"Se stai cercando qualcosa che sia davvero alla pari con la profondità e l'ampiezza di Compass, Bootstrap è la tua risposta." Se ci stiamo confrontando rigorosamente con le due librerie precedenti che abbiamo usato prima, allora vorremmo dare un'occhiata al file mixins.less. Qui troverai mix per sfumature, opacità, ombre, correzione chiara, sistema di griglia e molto altro. Se stai cercando qualcosa che sia davvero alla pari con la profondità e l'ampiezza di Compass, Bootstrap è la tua risposta.
Critica
Come puoi dire dai miei post precedenti, sono un grande fan di Bootstrap. È una risorsa davvero solida e un ottimo modo per Twitter di contribuire alla comunità degli sviluppatori.
? Tutti questi ottimi mix sono inclusi in Bootstrap, ma per quanto posso dire, non appaiono nella documentazione attuale.?La mia principale mania qui è che tutti questi ottimi mix sono inclusi in Bootstrap, ma per quanto posso dire, non appaiono nella documentazione attuale. Se lo fanno, non riesco a trovarli, il che è ancora un grosso problema.
Altre risorse, come LESS Hat, LESS Elements e Compass, elencano chiaramente i mixin inclusi con esempi di sintassi, codice di implementazione e output finale. Abbiamo bisogno di qualcosa del genere per i mixin Bootstrap. Forse sono pensati solo per gli effettivi elementi dell'interfaccia utente di Bootstrap, ma dov'è il divertimento?
Qual'è il migliore?
Penso che sia abbastanza ovvio che LESS Hat e Bootstrap stiano entrambi calci fuori da LESS Elements, ma tra i due, quale è il migliore? La risposta, naturalmente, dipende da ciò di cui hai bisogno.
Bootstrap non è un elenco di mix, è un enorme framework con un sacco di risorse.Se stai cercando solo una manciata di mix, puoi sempre scaricare Bootstrap e prendere il file mixins.less, ma anche quello potrebbe essere un po 'pesante per le tue esigenze.
Al contrario, LESS Hat ha un'impronta molto più piccola e non cerca di essere un quadro completo. Ha i mixin MENO di cui hai bisogno e nient'altro.
In conclusione, se stai cercando di ridefinire completamente e sistematizzare il modo in cui crei siti web, controlla Bootstrap. Tuttavia, se sei un utente MENO in cerca di mix, ti consiglio di dare un'occhiata a LESS Hat.
Se sei un utente MENO, usi qualche libreria di mixin? Fateci sapere nei commenti.