1 00:00:03,250 --> 00:00:06,680 Passeremo ora al prossimo esercizio, 2 00:00:06,680 --> 00:00:11,535 dove useremo la sintassi SCSS per definire le 3 00:00:11,535 --> 00:00:18,325 nostre classi SCSS e convertirli automaticamente nelle loro classi CSS corrispondenti. 4 00:00:18,325 --> 00:00:22,220 Faremo esattamente lo stesso insieme di passaggi 5 00:00:22,220 --> 00:00:26,890 che abbiamo fatto per l'ultimo esercizio che abbiamo completato appena ora, 6 00:00:26,890 --> 00:00:31,470 ma usando la sintassi SCSS. 7 00:00:31,470 --> 00:00:38,885 Per iniziare, nel tuo progetto nella cartella CSS, 8 00:00:38,885 --> 00:00:47,180 creiamo un nuovo file e chiamalo come stile start SCSS. 9 00:00:47,180 --> 00:00:51,660 Ora in questo file definiremo le nostre classi SCSS e poi 10 00:00:51,660 --> 00:00:56,795 convertirli automaticamente nelle nostre classi CSS. 11 00:00:56,795 --> 00:01:01,350 Quindi, in là, iniziamo definendo prima le variabili, 12 00:01:01,350 --> 00:01:05,110 quindi inizierò con il grigio chiaro, 13 00:01:06,810 --> 00:01:11,820 ora ho aggiunto alcune variabili in più qui di nuovo con 14 00:01:11,820 --> 00:01:16,940 gli stessi nomi usati nell'ultimo esercizio precedente, 15 00:01:16,940 --> 00:01:20,760 ma con la sintassi SCSS in modo che 16 00:01:20,760 --> 00:01:25,630 tutte le variabili siano precedute dal segno del dollaro per definirli come variabili. 17 00:01:25,630 --> 00:01:27,750 Successivamente definirà il mixin. 18 00:01:27,750 --> 00:01:43,888 Quindi per il mixin, direi mixin zero margine, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-sinistra-destra, 20 00:01:48,920 --> 00:01:54,920 e definiamo i valori come prima. 21 00:02:17,930 --> 00:02:21,130 Ora che abbiamo completato la definizione del mixin, 22 00:02:21,130 --> 00:02:26,690 possiamo farne uso nelle nostre classi SCSS che definiamo in seguito. 23 00:02:27,480 --> 00:02:31,280 Ora definiamo alcune classi SCSS, 24 00:02:31,280 --> 00:02:40,025 quindi definirò l'intestazione di riga che farò uso 25 00:02:40,025 --> 00:02:44,740 del mixin margine zero 26 00:02:44,740 --> 00:02:52,900 con i valori zero pixel qui. 27 00:02:53,620 --> 00:02:59,055 Continueremo a definire alcune altre classi che aggiungeranno qui, in 28 00:02:59,055 --> 00:03:01,910 modo da poter vedere che ho definito insieme 29 00:03:01,910 --> 00:03:05,290 all'intestazione della riga e al contenuto della riga in cui ho usato 30 00:03:05,290 --> 00:03:12,730 i mixins e il footer e l'indirizzo Jumbotron 31 00:03:12,730 --> 00:03:15,230 e così via, e puoi vedere l'uso delle 32 00:03:15,230 --> 00:03:21,190 variabili che abbiamo definito in precedenza in questo esempio lì. 33 00:03:21,190 --> 00:03:27,875 Il codice è ovviamente disponibile nelle istruzioni di esercizio che seguono questo video. 34 00:03:27,875 --> 00:03:32,295 Successivamente aggiungeremo se si nidificazione classi. 35 00:03:32,295 --> 00:03:35,395 Proprio come abbiamo fatto nell'ultimo esercizio, 36 00:03:35,395 --> 00:03:40,780 aggiungeremo nella classe carosello con lo sfondo impostato su sfondo scuro e poi 37 00:03:40,780 --> 00:03:42,345 all'interno dove nidificheremo 38 00:03:42,345 --> 00:03:47,065 una classe di elemento carosello con l'altezza impostata sull'altezza dell'elemento carosello, 39 00:03:47,065 --> 00:03:51,945 e poi un'altra immagine di colori della classe interna con alcune proprietà lì, 40 00:03:51,945 --> 00:03:56,945 e quindi la classe pulsante carosello come abbiamo definito in precedenza. 41 00:03:56,945 --> 00:04:02,070 Quindi, con questo, abbiamo apportato le modifiche alle nostre classi SCSS, 42 00:04:02,070 --> 00:04:03,925 quindi salviamo le modifiche. 43 00:04:03,925 --> 00:04:09,200 Ora, abbiamo bisogno di convertire questo nel suo file CSS corrispondente. 44 00:04:09,200 --> 00:04:13,835 Per convertire il nostro codice sorgente SCSS nel codice CSS corrispondente, 45 00:04:13,835 --> 00:04:19,395 stiamo andando a prendere l'aiuto di un altro modulo nodo chiamato node-sass. 46 00:04:19,395 --> 00:04:24,485 Consente di installare il modulo nodo digitando npm 47 00:04:24,485 --> 00:04:33,845 install save dev—save dev e quindi node-sass. 48 00:04:33,845 --> 00:04:37,690 In questo modo, salveremo questo pacchetto node-sass 49 00:04:37,690 --> 00:04:42,020 come dipendenza di sviluppo nel nostro file package.json. 50 00:04:42,020 --> 00:04:44,160 Una volta completata l'installazione, 51 00:04:44,160 --> 00:04:49,090 ci accingiamo ad aggiungere uno script nel nostro file package.json. 52 00:04:49,090 --> 00:04:52,020 Andando al nostro file package.json, 53 00:04:52,020 --> 00:04:56,430 se scorri verso l'alto vedrai che nelle dipendenze di sviluppo, 54 00:04:56,430 --> 00:05:00,380 ora anche il node-sass viene aggiunto nelle dipendenze di sviluppo. 55 00:05:00,380 --> 00:05:04,520 Ora aggiungeremo uno script nel nostro file package.jsm, 56 00:05:04,520 --> 00:05:07,015 quindi a destra metà di questa diapositiva, 57 00:05:07,015 --> 00:05:11,225 aggiungerò uno script chiamato SCSS e quindi 58 00:05:11,225 --> 00:05:20,185 questo script sarà node-sass -o CSS/, 59 00:05:20,185 --> 00:05:26,500 il che significa che l'output di questo i file convertiti saranno nella cartella CSS, 60 00:05:26,500 --> 00:05:29,715 e la fonte qui sarà anche in la cartella CSS. 61 00:05:29,715 --> 00:05:34,950 Quindi tutti i file con estensione.scss verranno 62 00:05:34,950 --> 00:05:41,960 convertiti e i file corresponding.CSS verranno generati da questo node-sass.module. 63 00:05:42,270 --> 00:05:47,450 Salviamo le modifiche e poi andremo al prompt dei comandi e quindi digitare 64 00:05:47,450 --> 00:05:54,310 in npm run SCSS e questo si prenderà cura di fare la nostra conversione. 65 00:05:54,310 --> 00:05:56,500 Andando al prompt dei comandi, 66 00:05:56,500 --> 00:06:02,005 digiteremo npm run SCSS e questo dovrebbe 67 00:06:02,005 --> 00:06:09,795 convertire automaticamente tutti i nostri file SCSS nei file CSS corrispondenti. 68 00:06:09,795 --> 00:06:11,905 Andando al nostro editor, 69 00:06:11,905 --> 00:06:16,525 ora vedi che c'è un file styles.css che è stato generato. 70 00:06:16,525 --> 00:06:18,530 Guardando il contenuto di questo file, 71 00:06:18,530 --> 00:06:25,000 vedrai che questo codice CSS che è stato generato dal nostro codice SCSS è praticamente 72 00:06:25,000 --> 00:06:32,050 lo stesso del codice CSS originale che abbiamo scritto noi stessi. 73 00:06:32,050 --> 00:06:35,875 Con questo, completiamo questo esercizio. 74 00:06:35,875 --> 00:06:40,220 In questo esercizio, abbiamo visto come possiamo scrivere 75 00:06:40,220 --> 00:06:48,195 codice SCSS e quindi convertirlo automaticamente nel loro codice CSS corrispondente. 76 00:06:48,195 --> 00:06:53,115 Il motivo per cui esaminiamo questo in dettaglio è perché 77 00:06:53,115 --> 00:06:59,190 Bootstrap fornisce i suoi file sorgente in formato SCSS. 78 00:06:59,190 --> 00:07:02,370 Se visiti la pagina Bootstrap, 79 00:07:02,370 --> 00:07:11,795 noterai che dice che Bootstrap è stato progettato utilizzando il preprocessore Sass. 80 00:07:11,795 --> 00:07:19,745 Quindi, se guardi come questo viene convertito da Sass 81 00:07:19,745 --> 00:07:23,475 e come puoi fare la tua personalizzazione 82 00:07:23,475 --> 00:07:28,115 usando il codice Bootstrap Sass puoi andare nella documentazione, 83 00:07:28,115 --> 00:07:32,025 e poi vedrai sotto 84 00:07:32,025 --> 00:07:37,610 «Opzioni» avrai alcune opzioni di personalizzazione definite qui. 85 00:07:39,630 --> 00:07:43,800 Varie opzioni di personalizzazione puoi vedere che 86 00:07:43,800 --> 00:07:49,780 queste variabili sono tutte definite usando la sintassi Sass qui, 87 00:07:49,780 --> 00:07:53,460 e anche sotto «Strumenti di costruzione», 88 00:07:53,460 --> 00:08:00,455 ti spiegherà come puoi fare la tua personalizzazione di Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Ora, ti consiglio vivamente di non provare questo finché non hai 90 00:08:05,330 --> 00:08:10,515 esperienza sufficiente con Bootstrap nella tua vita quotidiana. 91 00:08:10,515 --> 00:08:12,784 Questo completa il nostro esercizio. 92 00:08:12,784 --> 00:08:21,250 Questo potrebbe essere un buon momento per fare un buon commit con l'esercizio del messaggio SCSS.