È ora di passare all'esercizio successivo, chiamato Esercizio: Meno.
Qualcosa che si desidera che il medico le
dica quando si visita lui o lei la prossima volta.
Tuttavia, esaminiamo meno in dettaglio ora per capire come possiamo definire
le classi CSS utilizzando la sintassi meno preprocessore e quindi
generare automaticamente le classi CSS corrispondenti dalle nostre classi meno.
Per iniziare, andiamo al
nostro progetto nell'Editor di testo e poi all'interno della cartella CSS,
ho intenzione di rinominare questo file styles.css come styles-old.css.
Salverò la mia versione corrente del
file styles.css perché ora scriveranno meno codice
e codice SCSS e quindi genereranno automaticamente il
file styles.css compilando questi linguaggi del preprocessore CSS.
Dopo aver fatto questo, quindi nella mia cartella CSS,
creeremo un nuovo file denominato styles.less.
E qui dentro, definirò il mio codice meno.
Per prima cosa definiamo alcune variabili meno.
Dirò, lt-grigio: ddd e così via.
Puoi vedere che ho aggiunto alcune variabili in meno qui.
Quindi, ho definito lo sfondo scuro come primo valore, la
luce di sfondo e lo sfondo pallido e anche
un'altra variabile chiamata carosello articolo-altezza come 300 pixel.
Ho intenzione di fare uso di queste variabili quando definisco le mie classi CSS in seguito.
Lasciami ora aggiungere un Mixin per
il mio file meno chiamato zero margin e definirò pad-up-dn
e pad-left-right,
0px è il valore predefinito e poi qui,
ho impostato il margine: 0px auto,
padding: pat-up-dn
e pad-left-right.
Quindi con questo, ho definito il Mixin che
farò uso nelle mie classi CSS che definiremo più tardi.
E questo porta due parametri pad-up-dn e pad-sinistra-destra.
Successivamente, aggiungerò alcune altre classi CSS, quindi inizio con l'
intestazione di riga e definisco questo come margine zero.
Permettetemi di aggiungere alcune altre classi CSS e poi tornare a darle un'occhiata.
Qui, ho definito un'altra classe CSS
usando il Mixin a margine zero con i parametri 50 pixel e 0 pixel,
un piè di pagina in cui definisco il colore di sfondo usando
la variabile che hanno definito in precedenza come
background-pale e poi jumbotron con
il Mixin a margine zero e il colore di sfondo definito come background-light,
e alcuni di questi altri che sono classi CSS standard,
che ho incluso lì perché ho intenzione di farne uso nella
mia pagina web e poi hai
navbar-dark per il quale il colore di sfondo che ho definito noi background-dark.
E il contenuto della scheda per il quale mi vedi di nuovo
usando il grigio chiaro variabile per il colore del bordo qui.
Successivamente, aggiungo qui la classe carosello per la quale definisco
lo sfondo come background-dark qui e poi,
definisco quell'elemento carosello.
Nota, come definisco che come elemento nidificato all'interno del mio carosello e per l'elemento carosello,
definisco l'altezza come carosello articolo-altezza qui,
che è una variabile che ho definito prima e dentro lì,
definisco l'immagine,
che è di nuovo un altro elemento nidificato all'interno del carosello e quindi per l'immagine,
definirò alcune proprietà CSS in seguito.
Come puoi vedere,
ho definito alcune proprietà per l'immagine.
Qui, vedi l'uso di classi nidificate qui,
quindi hai carosello e all'interno ho un elemento carosello e al suo interno,
un'immagine definita qui.
Infine,
in basso, aggiungo la classe CarouselButton,
che viene utilizzata per specificare il CarouselButton.
Con queste modifiche al mio file styles.less aggiungendo tutte le meno classi qui,
lasciami salvare le modifiche.
Ora, voglio essere in grado di convertire automaticamente questo nel loro file CSS corrispondente.
Per convertire automaticamente il mio file meno nel suo file CSS corrispondente,
farò uso di un modulo nodo chiamato come meno.
Per installarlo al prompt,
digito sudo npm install meno g meno.
Lo installo come modulo nodo globale.
E una volta installato,
renderà disponibile un compilatore meno chiamato come lessc al prompt dei comandi.
Se si esegue questo su un computer Windows,
non è necessario eseguire sudo,
come probabilmente già ricorderai.
Ora che abbiamo installato il compilatore lessc,
ho intenzione di compilare il mio codice meno nel suo codice CSS corrispondente.
Per fare ciò, lasciami andare nella cartella CSS e poi qui,
vedrai che hai il file styles.less.
Al prompt, digitare lessc styles.less styles.css,
e una volta completata la compilazione,
si avrà il file CSS corrispondente.
Quindi, come vedi ora,
hai meno codice convertito nel codice CSS corrispondente.
Dando un'occhiata al codice CSS generato dal codice meno,
si vedrebbe che questo codice sembra più o meno lo
stesso di quello che abbiamo definito nel nostro file CSS originale.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo imparato a scrivere
meno codice e quindi convertirlo automaticamente nel codice CSS corrispondente.
A questo punto, potresti voler salvare le modifiche
al tuo repository Git con il messaggio Esercizio: Less.