Share
Non molto tempo fa abbiamo dato un'occhiata a The Basics of LESS e, sebbene questo sia un solido riferimento per i principianti, c'è molto di più che puoi fare con LESS! L'obiettivo di questo tutorial è quello di ampliare le conoscenze del precedente articolo e darti alcuni consigli pratici su come utilizzare tutte le grandi cose di MENO.
I concetti contenuti nell'articolo precedente saranno essenziali per la non comprensione di questo. Variabili, mixin, funzioni e nesting in LESS dovrebbero essere tutti familiari e dovresti avere almeno alcune mani sulla conoscenza di LESS.
Nota: c'è una buona dose di consigli soggettivi in questo articolo. Molte cose di cui discuteremo riguardano la metodologia rispetto alle regole e ai regolamenti di una lingua. Ti mostrerò come organizzo i file e creo mixin, ma potrebbero esserci altri modi migliori di fare le cose. Se pensi di utilizzare una struttura migliore, o di avere alcuni suggerimenti e trucchi del proprio, sentiti libero di scatenare nei commenti.
Organizzare i tuoi file è sempre estremamente importante, anche per LESS. Generalmente creo una cartella "styles" nella mia directory principale del progetto, dove memorizzo tutti gli stili richiesti per quel progetto. Quindi, cosa succede se il tuo progetto richiede di includere file CSS da più posizioni?
Il modo migliore per semplificarti la vita è usare uno strumento come Winless o CodeKit. Questi strumenti ti consentono di compilare file diversi in diverse posizioni. Ciò ti consente di conservare tutti i tuoi file di stile in un'unica posizione mentre li compili in realtà in cartelle diverse nei tuoi progetti.
Come puoi vedere, in questo progetto WordPress il file "style.less" evidenziato è contenuto nella cartella "styles". Dal momento che WordPress richiede un file 'style.css' nella directory principale, abbiamo bisogno di compilarlo lì. CodeKit o uno strumento simile rende questo facile poiché è sufficiente impostarlo una volta e poi puoi dimenticarlo fino alla fine del progetto.
Un altro problema che può sorgere con i file CSS è come gestire i file di terze parti. I sistemi Grid, gli stili per i cursori JavaScript, i reset e altro richiedono l'uso di file CSS (a volte multipli). Di solito ci sono due metodi per farlo accadere. O colleghi i file alla tua pagina web separatamente oppure metti tutto il codice all'interno di un file e riduci a icona per fini di esecuzione. Con uno strumento di compilazione LESS questo diventa di nuovo più facile!
Usando le regole di importazione puoi inserire tutti i file nel tuo foglio di stile LESS principale. Puoi anche importare meno file, rendendo le loro regole, mixin e altri elementi utilizzabili in tutti i file successivi.
Nota: mentre questo metodo è utile, non è una soluzione universale. In alcuni casi potresti dover includere tutti i file separatamente, in altri potrebbe essere meglio includere tutto in un file.
Il problema più grande con i CSS è l'estrema mancanza di coerenza in quasi tutti i progetti. Questa situazione deriva principalmente dalla natura del linguaggio stesso, non necessariamente dall'inefficacia del programmatore. Il CSS è un linguaggio molto sciolto e tollerante che significa che promuove la configurazione rispetto alla convenzione, mentre il contrario sarebbe preferibile. Inoltre, i CSS tendono ad essere codificati in modo ancora più procedurale del solito, il che significa che gli schemi globali non vengono sempre rilevati e implementati nel modo più semplice possibile.
Anche se LESS non è una cureall, ti consente di essere molto più coerente dandoti strumenti come funzioni e nidificazione. Diamo un'occhiata ad alcuni esempi in cui è possibile ottenere una maggiore coerenza con gli strumenti LESS.
.raggio (@radius: 5px) -webkit-border-radius (@radius); -khtml-border-radius (@radius); -moz-border-radius (@radius); -ie-border-radius (@radius); -o-border-radius (@radius); border-radius (@radius);
Senza MENO avresti bisogno di copiare incolla queste regole quando necessario. Molte persone scrivono semplicemente mentre vanno, quindi è molto più probabile che tu dimentichi uno dei prefissi o li scriva in un ordine diverso. Sebbene questi non siano dealbreaker per il tuo sito Web, ogni piccola incoerenza aggiunge rumore al tuo codice.
La natura nestable delle regole ti dà anche la possibilità di aggiungere l'ordine al tuo codice. Cerco di utilizzare il minor numero possibile di div e altri elementi del contenitore e cerco di indirizzare ogni elemento nel modo più specifico possibile
.commentlist .comment .comment-date .comment-time color: # 888;
All'inizio sembra un po 'ridondante e sono d'accordo, in un certo senso lo è. Tuttavia, rende tutto molto chiaro.
L'utilità di questo sarà evidente solo se la si utilizza in un progetto più grande, ma qui c'è un rapido snippet che mostra come un commento è reso sensibile. Sotto una larghezza specifica la porzione temporale della data del commento è nascosta per risparmiare spazio.
@media screen e (max-width: 600px) .commentlist .comment-container .comment-main .comment-header .comment-date .time display: none;
Sono d'accordo che sembra orribile. Tuttavia, nessun pensiero è andato a creare la regola. Non pensare significa tornare facilmente indietro perché non hai bisogno di capire i trucchi intelligenti che hai aggiunto lungo la strada. Inoltre, puoi dire cosa questa regola fa semplicemente guardandolo.
La mia ultima argomentazione per coerenza è più complessa, ma penso che sia degna di essere esaminata. Costruisco temi WordPress in vendita su ThemeForest e una funzione è che puoi scegliere qualsiasi colore per il tuo tema. Gli elementi sono ricolorati a tua scelta. Il modo in cui questo viene fatto è che ogni volta che viene definito un "colore primario" viene sovrascritto con il codice CSS dinamico che produciamo con PHP. Questo sembra qualcosa del genere:
Contenuto del nostro file LESS:
@ color-primary: rosso; .button background: @ color-primary; imbottitura: 8px 20px;
Contenuto di un PHP incluso alla fine dell'intestazione HTML:
Fondamentalmente, ogni volta che c'è un riferimento a '@ color-primary' nel file LESS, dobbiamo creare una regola PHP per assicurarci che i colori scelti dall'utente siano riflessi sul sito. Questo può richiedere un po 'di tempo e, cosa più importante, è estremamente noioso. Per combattere la noia stiamo creando uno script che analizza il nostro file LESS e crea il codice PHP che possiamo semplicemente copiare e incollare in un colpo solo. Questo è un po 'diffcile perché ci sono alcune regole dinamiche con funzioni e quant'altro, ma per estrarlo il nostro file LESS deve essere ben strutturato e coerente.
Un grande risparmio di tempo e un modo per aumentare la coerenza tra i progetti è utilizzare una comune libreria di regole. Precedentemente ho chiesto; perché scrivere tutte le regole del raggio di confine quando possiamo usare un mixin? Ora possiamo saltare di un livello più alto. Perché riscrivere il mixin del raggio di confine per ogni progetto quando puoi semplicemente utilizzare lo stesso?
Ci sono alcuni mix (specialmente quelli che affrontano le specifiche del fornitore) che saranno gli stessi in tutti i progetti. Questi possono essere separati in un file "mixins.less" che puoi usare ovunque tu voglia. Ecco alcuni esempi di mix che sono sempre utili da avere in giro.
.opacity (@opacity: 0.8) @ieopacity: @opacity * 100; filter: ~ "alpha (opacity = @ ieopacity)"; -khtml-opacity: @opacity; -moz-opacity: @opacity; opacità: @opacity;
.gradiente (@start, @end) background: @start; filter: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, @ start), color-stop (100%, @ end)); background: -webkit-linear-gradient (in alto, @start 0%, @end 100%); background: -moz-linear-gradient (in alto, @start 0%, @end 100%); background: -ms-linear-gradient (in alto, @start 0%, @end 100%); background: -o-linear-gradient (in alto, @start 0%, @end 100%); sfondo: gradiente lineare (in alto, @ avvio 0%, @end 100%);
.element-color (@color) when (lightness (@color)> = 60%) color: @color - # 888; .element-color (@color) when (lightness (@color) < 60% ) color: #fff;
Quest'ultimo è particolarmente interessante. Se il colore di sfondo è chiaro, il colore del testo sarà una versione molto scura dello stesso colore.
Suggerisco sempre di pensare alla posizione della regola che stai scrivendo. Sei sicuro che sia usato globalmente per tutti i progetti? Potrebbe essere allettante inserire un sacco di regole, ma in realtà potrebbe essere meglio creare anche un file specifico per il progetto.
Ricorda l'immagine del commento prima? Il contenitore di quell'elemento ha un formato specifico. Ha un bordo bianco e un contorno grigio. Molti altri elementi di questo tema condividono questo schema. Questo potrebbe essere creato con una regola come questa:
.box border: 1px solid #fff; outline: 1px solid #dedede; .com .box; sfondo: #eeeeee;
Mentre questo è usato dappertutto qui, non sarà lo stesso su più progetti. Pertanto sarebbe meglio creare un file come "mytheme.less" che contenga queste regole ampiamente utilizzate, ma specifiche per tema. Se vuoi davvero usare qualcosa come nel file globale, potresti espanderci in questo modo:
.bordato a riquadri (@ border-color: #fff, @ outline-color: #dedede) border: 1px solid @ border-color; outline: 1px solid @ outline-color;
Questa regola ti consentirà di creare lo stesso stile di casella con la stessa facilità, ma puoi anche aggiungere parametri per creare bordi di riquadri di colore diverso. Puoi fare un ulteriore passo avanti astrazionando le cose ancora di più e creando un file 'bootstrap.less'; questo ci porta bene nel nostro prossimo argomento, creando una struttura per noi stessi.
@ border-box-border-color: #fff; @ border-box-outline-color: #dedede;
.riquadro (@bc: @ border-box-border-color, @oc: @ border-box-outline-color) border: 1px solid @bc; contorni: 1px solid @oc;
Creare il tuo framework è di solito un no-no, a meno che tu non sia molto avanzato nel tuo campo principale (e altri 5-6) e hai ottime ragioni per farlo. Con CSS e LESS è un po 'diverso; puoi iniziare a creare il tuo frame dal primo giorno. Dato che LESS è un superset di CSS, qualsiasi cosa tu faccia si adatta perfettamente al codice esistente. Poiché i CSS perdonano e cadono a cascata, non puoi fare alcun danno permanente che non possa essere annullato.
Suggerisco di creare un file 'mixins' principale per iniziare. Puoi sempre rimuovere le cose da esso o aggiungerle se necessario. Successivamente è possibile aggiungere file specifici del progetto, file di terze parti, un file di bootstrap e così via. Ecco come è organizzato il mio framework.
Come in ogni lingua, le funzionalità della codifica contengono molte sfide e tecniche diverse che non possono essere scoperte e superate semplicemente guardando la documentazione. Per usare MENO in tutta la sua estensione dovresti leggere dei suggerimenti e provare ad assumere la logica, ma alla fine dovrai acquisire esperienza. Coerenza, logica e semplicità dovrebbero essere le tue parole guida e MENO ti offre tutti gli strumenti per farlo.
Infine, gradirei il tuo contributo e mi piacerebbe sapere come organizzi MENO e come lo implementa nei tuoi progetti. Grazie per aver letto!
Accentsconagua