Una delle cose che CSS Non ha di default l'uso di strutture in stile programmazione dove possiamo riutilizzare il codice in modo logico, il massimo che possiamo ottenere in modo standard è creare classi e raggruppare all'interno delle etichette ciò che vogliamo essere influenzato da questi cambiamenti.
Questo approccio significa che alla fine della giornata ci ritroveremo con lunghi fogli di stile, e sebbene quel risultato non varierà usando Less.js, se cambia il modo in cui si arriva a dette foglie, questo grazie al Mixin ed ereditarietà, dove possiamo dichiarare e utilizzare alcuni componenti, per evitare di dover sviluppare manualmente le strutture.
Requisiti1- Per eseguire questo tutorial avremo bisogno di alcune cose in anticipo, abbiamo bisogno di una cartella in cui possiamo archiviare i nostri file .meno sì .css, dobbiamo disporre delle autorizzazioni per poter apportare modifiche se necessario.
2- Dobbiamo avere un'installazione funzionale di Less.js, così come tutti i suoi prerequisiti, così come sono Nodo.js sì npm, in modo da poter compilare i fogli di stile generati.
3- Infine avremo anche bisogno di un editor di testo per poter fare il codice, possiamo usare Testo sublime o NotePad ++, anche se il classico blocco note funzionerà anche per noi, tutto dipende dal fatto che vogliamo aiuto con il codice o funzionalità avanzate.
Imposta le proprietà CSS con un MixinUna delle prime cose che dovremmo sapere Mixin, è che sono metodi che ci aiutano a stabilire le proprietà CSS per il nostro progetto, in modo da aiutarci a riutilizzare il codice e ottenere stili più coerenti. La particolarità di un Mixin è che durante la compilazione del nostro codice Meno Questo non viene preso in considerazione, nel senso che non viene generato un foglio di stile Mixin, questo si ottiene includendo le parentesi quando le si definisce, una volta che abbiamo un Mixin dobbiamo importare il suo file sorgente e in questo modo semplicemente i suoi valori sono trasferito al nostro foglio principale che includeremo nella nostra pagina.
Creare il nostro primo mischiare
Creiamo un mischiare che ci permette di stabilire la proprietà CSS per arrotondare i bordi di un elemento nel nostro HTML, per questo dobbiamo seguire i seguenti passaggi:
1- Creeremo nella nostra cartella del progetto un file chiamato mixins.less, e all'interno inseriremo il seguente contenuto:
.arrotondati () {border-radius: 7px; }2- Ora creeremo un file chiamato progetto.less, qui è dove andremo a stabilire il modo in cui verranno applicati i diversi stili della nostra pagina HTML, così ci abituiamo a lavorare con Meno creeremo diverse regole CSS in modo che possiamo vedere come il MixinVediamo il codice che dobbiamo inserire in questo file.
@import "mixins.less"; @ colore di sfondo dell'intestazione: blu; @ content-background-color: verde; @ footer-colore-sfondo: rosso; intestazione {. bordi arrotondati (); background-color: @ header-background-color; colore: contrasto (@ header-background-color); } p {.bordi arrotondati (); background-color: @ content-background-color; colore: contrasto (@ contenuto-sfondo-colore); } piè di pagina {. bordi arrotondati (); background-color: @ footer-background-color; colore: contrasto (@ footer-background-color); }Come possiamo vedere, iniziamo importando il file che abbiamo generato nel passaggio precedente, quindi stabiliamo 3 variabili a cui diamo un colore come valore, infine iniziamo a creare le classi per gli elementi HTML, la prima cosa che facciamo è chiamare la nostra funzione Bordi arrotondati(), e quindi assegniamo i colori dell'elemento con le variabili.
3- In questo passaggio creeremo il file HTML, che possiamo chiamare come vogliamo purché abbia una struttura come la seguente:
Mix con Less La cabeceraCome possiamo vedere abbiamo semplicemente fatto l'inclusione del nostro file .meno come il .js che contiene lo strumento, abbiamo optato per questa opzione in modo da non dover compilare, tuttavia dobbiamo ricordare che questa non deve essere applicata in produzione. Nel corpo del HTML Generiamo i diversi elementi che avevamo definito nel CSS per vedere l'applicazione degli stili.Il contenuto
piè di pagina
4- Infine, se vogliamo vedere il risultato, basta aprire il nostro documento in un browser come Firefox e così possiamo vedere come appare il tutto, vediamo nell'immagine seguente cosa abbiamo ottenuto:
Se andiamo un po' oltre e vediamo il codice sorgente che il browser interpreta, vedremo come le diverse variabili e il mischiare applicato, è stato effettivamente sostituito dal codice CSS, il che significa che anche se abbiamo scritto la proprietà solo una volta Meno lo posiziona dove corrisponde la corrispondenza, vediamo:
Il Patrimonio all'interno dei nostri stili
Lavorare con le eredità è qualcosa che ci aiuta ed è per questo che possiamo creare elementi superiori che passano alcune proprietà ai loro elementi inferiori o contenuti, cioè ci sono caratteristiche comuni che non dovremo ripetere negli elementi che vogliamo per averli.
Come sempre, l'obiettivo di non ripetere il codice è farci risparmiare lavoro e tempo, oltre a ridurre gli errori e aumentare la manutenibilità del nostro codice grazie alla coerenza e alla centralizzazione delle sue risorse.
Uno dei modi più semplici ma efficaci per lavorare sull'ereditarietà è con elementi annidati, diciamo che abbiamo una sezione HTML e all'interno avremo diversi elementi, se usiamo il CSS Classico dire che tutti gli elementi di quella sezione hanno delle proprietà ma queste sono diverse, sarebbe necessario fare almeno una riga per ogni stile, vediamo cosa intendiamo:
elemento di sezione1 {contenuto1: xx; } sezione elemento2 {contenuto2: zz; }Come possiamo vedere, creiamo più codice di quanto dovremmo aver bisogno, invece se usiamo l'ereditarietà e l'annidamento in Meno potremmo ottenere qualcosa come il seguente:
sezione {elemento1 {contenuto1: xx; } elemento2 {contenuto2: zz; }}Come possiamo vedere, non solo scriviamo di meno, ma anche la rappresentazione di ciò che vogliamo ottenere è molto più logica, il che ci aiuta a comprendere e separare correttamente gli elementi che utilizzeremo nei nostri stili.
Creare stili annidati
Ora applicheremo quanto appena spiegato nel punto precedente, dobbiamo creare un file .meno dove creiamo uno stile annidato, per risparmiare lavoro e renderlo più logico. Per raggiungere questo compito dobbiamo seguire i seguenti passaggi:
1- Creiamo un file.meno come possiamo chiamare? ereditarietà.less, è qui che creeremo gli stili nidificati, per capirlo vedremo semplicemente il codice che andremo a posizionare e quindi il concetto ci arriverà in un modo migliore.
sezione {h1 {font-size: 4em;} p {padding: 0 5px;}}Vediamo che abbiamo creato uno stile per l'elemento sezione, e che tutto h1 o P all'interno di quell'elemento contenitore deve funzionare con le regole stabilite che abbiamo annidato.
2- Ora dobbiamo creare il nostro file HTML che assomiglierà molto all'esercizio precedente, quali modifiche sono i nomi dei file da includere e la struttura all'interno del corpo, ma se lo vediamo in modo astratto stiamo parlando della stessa cosa, diamo un'occhiata al codice.
Eredità in menoCome vediamo semplicemente includendo il nostro file Meno è che genereremo gli stili necessari, se vediamo come appare nel browser otterremo qualcosa del genere:I nostri contenuti
Tuttavia, se notiamo cosa succede con il CSS Quando viene interpretato o compilato, vedremo che il form nidificato che abbiamo costruito non viene rispettato, ma poiché il compilatore crea direttamente questo form non nidificato, non dobbiamo preoccuparci che sia così, vediamo cosa il codice che vede il nostro browser assomiglia a:
Con questo possiamo finire questo tutorial, come abbiamo visto Meno non è solo scrivere CSS in un modo diverso, è rendere utili queste differenze, il che ci porta a risparmiare tempo, rendere le applicazioni più amichevoli per il nostro team di sviluppo e risparmiare sforzi pensando in modo più logico e riutilizzando i componenti. Il modo in cui tutto ciò ha più senso per noi è che continuiamo a praticare e applicare questi esempi in casi pratici e reali in modo da poterci abituare a questo modo di lavorare.
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
