Passeremo ora al prossimo esercizio,
dove useremo la sintassi SCSS per definire le
nostre classi SCSS e convertirli automaticamente nelle loro classi CSS corrispondenti.
Faremo esattamente lo stesso insieme di passaggi
che abbiamo fatto per l'ultimo esercizio che abbiamo completato appena ora,
ma usando la sintassi SCSS.
Per iniziare, nel tuo progetto nella cartella CSS,
creiamo un nuovo file e chiamalo come stile start SCSS.
Ora in questo file definiremo le nostre classi SCSS e poi
convertirli automaticamente nelle nostre classi CSS.
Quindi, in là, iniziamo definendo prima le variabili,
quindi inizierò con il grigio chiaro,
ora ho aggiunto alcune variabili in più qui di nuovo con
gli stessi nomi usati nell'ultimo esercizio precedente,
ma con la sintassi SCSS in modo che
tutte le variabili siano precedute dal segno del dollaro per definirli come variabili.
Successivamente definirà il mixin.
Quindi per il mixin, direi mixin zero margine, pad-up-down,
pad-sinistra-destra,
e definiamo i valori come prima.
Ora che abbiamo completato la definizione del mixin,
possiamo farne uso nelle nostre classi SCSS che definiamo in seguito.
Ora definiamo alcune classi SCSS,
quindi definirò l'intestazione di riga che farò uso
del mixin margine zero
con i valori zero pixel qui.
Continueremo a definire alcune altre classi che aggiungeranno qui, in
modo da poter vedere che ho definito insieme
all'intestazione della riga e al contenuto della riga in cui ho usato
i mixins e il footer e l'indirizzo Jumbotron
e così via, e puoi vedere l'uso delle
variabili che abbiamo definito in precedenza in questo esempio lì.
Il codice è ovviamente disponibile nelle istruzioni di esercizio che seguono questo video.
Successivamente aggiungeremo se si nidificazione classi.
Proprio come abbiamo fatto nell'ultimo esercizio,
aggiungeremo nella classe carosello con lo sfondo impostato su sfondo scuro e poi
all'interno dove nidificheremo
una classe di elemento carosello con l'altezza impostata sull'altezza dell'elemento carosello,
e poi un'altra immagine di colori della classe interna con alcune proprietà lì,
e quindi la classe pulsante carosello come abbiamo definito in precedenza.
Quindi, con questo, abbiamo apportato le modifiche alle nostre classi SCSS,
quindi salviamo le modifiche.
Ora, abbiamo bisogno di convertire questo nel suo file CSS corrispondente.
Per convertire il nostro codice sorgente SCSS nel codice CSS corrispondente,
stiamo andando a prendere l'aiuto di un altro modulo nodo chiamato node-sass.
Consente di installare il modulo nodo digitando npm
install save dev—save dev e quindi node-sass.
In questo modo, salveremo questo pacchetto node-sass
come dipendenza di sviluppo nel nostro file package.json.
Una volta completata l'installazione,
ci accingiamo ad aggiungere uno script nel nostro file package.json.
Andando al nostro file package.json,
se scorri verso l'alto vedrai che nelle dipendenze di sviluppo,
ora anche il node-sass viene aggiunto nelle dipendenze di sviluppo.
Ora aggiungeremo uno script nel nostro file package.jsm,
quindi a destra metà di questa diapositiva,
aggiungerò uno script chiamato SCSS e quindi
questo script sarà node-sass -o CSS/,
il che significa che l'output di questo i file convertiti saranno nella cartella CSS,
e la fonte qui sarà anche in la cartella CSS.
Quindi tutti i file con estensione.scss verranno
convertiti e i file corresponding.CSS verranno generati da questo node-sass.module.
Salviamo le modifiche e poi andremo al prompt dei comandi e quindi digitare
in npm run SCSS e questo si prenderà cura di fare la nostra conversione.
Andando al prompt dei comandi,
digiteremo npm run SCSS e questo dovrebbe
convertire automaticamente tutti i nostri file SCSS nei file CSS corrispondenti.
Andando al nostro editor,
ora vedi che c'è un file styles.css che è stato generato.
Guardando il contenuto di questo file,
vedrai che questo codice CSS che è stato generato dal nostro codice SCSS è praticamente
lo stesso del codice CSS originale che abbiamo scritto noi stessi.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto come possiamo scrivere
codice SCSS e quindi convertirlo automaticamente nel loro codice CSS corrispondente.
Il motivo per cui esaminiamo questo in dettaglio è perché
Bootstrap fornisce i suoi file sorgente in formato SCSS.
Se visiti la pagina Bootstrap,
noterai che dice che Bootstrap è stato progettato utilizzando il preprocessore Sass.
Quindi, se guardi come questo viene convertito da Sass
e come puoi fare la tua personalizzazione
usando il codice Bootstrap Sass puoi andare nella documentazione,
e poi vedrai sotto
«Opzioni» avrai alcune opzioni di personalizzazione definite qui.
Varie opzioni di personalizzazione puoi vedere che
queste variabili sono tutte definite usando la sintassi Sass qui,
e anche sotto «Strumenti di costruzione»,
ti spiegherà come puoi fare la tua personalizzazione di Bootstrap.
Ora, ti consiglio vivamente di non provare questo finché non hai
esperienza sufficiente con Bootstrap nella tua vita quotidiana.
Questo completa il nostro esercizio.
Questo potrebbe essere un buon momento per fare un buon commit con l'esercizio del messaggio SCSS.