1 00:00:03,290 --> 00:00:09,780 È ora di passare all'esercizio successivo, chiamato Esercizio: Meno. 2 00:00:09,780 --> 00:00:12,860 Qualcosa che si desidera che il medico le 3 00:00:12,860 --> 00:00:16,380 dica quando si visita lui o lei la prossima volta. 4 00:00:16,380 --> 00:00:25,515 Tuttavia, esaminiamo meno in dettaglio ora per capire come possiamo definire 5 00:00:25,515 --> 00:00:31,830 le classi CSS utilizzando la sintassi meno preprocessore e quindi 6 00:00:31,830 --> 00:00:38,725 generare automaticamente le classi CSS corrispondenti dalle nostre classi meno. 7 00:00:38,725 --> 00:00:42,630 Per iniziare, andiamo al 8 00:00:42,630 --> 00:00:51,865 nostro progetto nell'Editor di testo e poi all'interno della cartella CSS, 9 00:00:51,865 --> 00:00:58,750 ho intenzione di rinominare questo file styles.css come styles-old.css. 10 00:00:58,750 --> 00:01:03,870 Salverò la mia versione corrente del 11 00:01:03,870 --> 00:01:08,685 file styles.css perché ora scriveranno meno codice 12 00:01:08,685 --> 00:01:13,200 e codice SCSS e quindi genereranno automaticamente il 13 00:01:13,200 --> 00:01:19,165 file styles.css compilando questi linguaggi del preprocessore CSS. 14 00:01:19,165 --> 00:01:23,300 Dopo aver fatto questo, quindi nella mia cartella CSS, 15 00:01:23,300 --> 00:01:31,280 creeremo un nuovo file denominato styles.less. 16 00:01:32,070 --> 00:01:37,290 E qui dentro, definirò il mio codice meno. 17 00:01:37,290 --> 00:01:41,800 Per prima cosa definiamo alcune variabili meno. 18 00:01:41,800 --> 00:01:52,420 Dirò, lt-grigio: ddd e così via. 19 00:01:52,420 --> 00:01:57,980 Puoi vedere che ho aggiunto alcune variabili in meno qui. 20 00:01:57,980 --> 00:02:02,310 Quindi, ho definito lo sfondo scuro come primo valore, la 21 00:02:02,310 --> 00:02:05,850 luce di sfondo e lo sfondo pallido e anche 22 00:02:05,850 --> 00:02:11,235 un'altra variabile chiamata carosello articolo-altezza come 300 pixel. 23 00:02:11,235 --> 00:02:17,305 Ho intenzione di fare uso di queste variabili quando definisco le mie classi CSS in seguito. 24 00:02:17,305 --> 00:02:22,995 Lasciami ora aggiungere un Mixin per 25 00:02:22,995 --> 00:02:31,130 il mio file meno chiamato zero margin e definirò pad-up-dn 26 00:02:41,320 --> 00:02:48,760 e pad-left-right, 27 00:02:48,760 --> 00:02:55,725 0px è il valore predefinito e poi qui, 28 00:02:55,725 --> 00:03:01,620 ho impostato il margine: 0px auto, 29 00:03:01,620 --> 00:03:11,520 padding: pat-up-dn 30 00:03:11,520 --> 00:03:14,460 e pad-left-right. 31 00:03:14,460 --> 00:03:20,180 Quindi con questo, ho definito il Mixin che 32 00:03:20,180 --> 00:03:25,785 farò uso nelle mie classi CSS che definiremo più tardi. 33 00:03:25,785 --> 00:03:31,265 E questo porta due parametri pad-up-dn e pad-sinistra-destra. 34 00:03:31,265 --> 00:03:39,740 Successivamente, aggiungerò alcune altre classi CSS, quindi inizio con l' 35 00:03:39,740 --> 00:03:50,435 intestazione di riga e definisco questo come margine zero. 36 00:03:50,435 --> 00:03:57,560 Permettetemi di aggiungere alcune altre classi CSS e poi tornare a darle un'occhiata. 37 00:03:57,560 --> 00:04:01,170 Qui, ho definito un'altra classe CSS 38 00:04:01,170 --> 00:04:06,480 usando il Mixin a margine zero con i parametri 50 pixel e 0 pixel, 39 00:04:06,480 --> 00:04:10,790 un piè di pagina in cui definisco il colore di sfondo usando 40 00:04:10,790 --> 00:04:15,660 la variabile che hanno definito in precedenza come 41 00:04:15,660 --> 00:04:19,940 background-pale e poi jumbotron con 42 00:04:19,940 --> 00:04:25,885 il Mixin a margine zero e il colore di sfondo definito come background-light, 43 00:04:25,885 --> 00:04:30,200 e alcuni di questi altri che sono classi CSS standard, 44 00:04:30,200 --> 00:04:34,610 che ho incluso lì perché ho intenzione di farne uso nella 45 00:04:34,610 --> 00:04:38,010 mia pagina web e poi hai 46 00:04:38,010 --> 00:04:42,850 navbar-dark per il quale il colore di sfondo che ho definito noi background-dark. 47 00:04:42,850 --> 00:04:46,980 E il contenuto della scheda per il quale mi vedi di nuovo 48 00:04:46,980 --> 00:04:51,820 usando il grigio chiaro variabile per il colore del bordo qui. 49 00:04:51,820 --> 00:04:58,700 Successivamente, aggiungo qui la classe carosello per la quale definisco 50 00:04:58,700 --> 00:05:06,010 lo sfondo come background-dark qui e poi, 51 00:05:06,010 --> 00:05:10,540 definisco quell'elemento carosello. 52 00:05:10,540 --> 00:05:18,225 Nota, come definisco che come elemento nidificato all'interno del mio carosello e per l'elemento carosello, 53 00:05:18,225 --> 00:05:24,225 definisco l'altezza come carosello articolo-altezza qui, 54 00:05:24,225 --> 00:05:28,965 che è una variabile che ho definito prima e dentro lì, 55 00:05:28,965 --> 00:05:31,005 definisco l'immagine, 56 00:05:31,005 --> 00:05:36,635 che è di nuovo un altro elemento nidificato all'interno del carosello e quindi per l'immagine, 57 00:05:36,635 --> 00:05:40,010 definirò alcune proprietà CSS in seguito. 58 00:05:40,010 --> 00:05:42,650 Come puoi vedere, 59 00:05:42,650 --> 00:05:46,200 ho definito alcune proprietà per l'immagine. 60 00:05:46,200 --> 00:05:50,950 Qui, vedi l'uso di classi nidificate qui, 61 00:05:50,950 --> 00:05:55,305 quindi hai carosello e all'interno ho un elemento carosello e al suo interno, 62 00:05:55,305 --> 00:05:57,145 un'immagine definita qui. 63 00:05:57,145 --> 00:05:58,945 Infine, 64 00:05:58,945 --> 00:06:02,075 in basso, aggiungo la classe CarouselButton, 65 00:06:02,075 --> 00:06:07,605 che viene utilizzata per specificare il CarouselButton. 66 00:06:07,605 --> 00:06:14,935 Con queste modifiche al mio file styles.less aggiungendo tutte le meno classi qui, 67 00:06:14,935 --> 00:06:16,465 lasciami salvare le modifiche. 68 00:06:16,465 --> 00:06:23,230 Ora, voglio essere in grado di convertire automaticamente questo nel loro file CSS corrispondente. 69 00:06:23,230 --> 00:06:28,875 Per convertire automaticamente il mio file meno nel suo file CSS corrispondente, 70 00:06:28,875 --> 00:06:32,660 farò uso di un modulo nodo chiamato come meno. 71 00:06:32,660 --> 00:06:35,015 Per installarlo al prompt, 72 00:06:35,015 --> 00:06:41,085 digito sudo npm install meno g meno. 73 00:06:41,085 --> 00:06:47,150 Lo installo come modulo nodo globale. 74 00:06:47,150 --> 00:06:54,555 E una volta installato, 75 00:06:54,555 --> 00:07:01,985 renderà disponibile un compilatore meno chiamato come lessc al prompt dei comandi. 76 00:07:01,985 --> 00:07:04,570 Se si esegue questo su un computer Windows, 77 00:07:04,570 --> 00:07:06,130 non è necessario eseguire sudo, 78 00:07:06,130 --> 00:07:09,900 come probabilmente già ricorderai. 79 00:07:09,900 --> 00:07:14,565 Ora che abbiamo installato il compilatore lessc, 80 00:07:14,565 --> 00:07:21,010 ho intenzione di compilare il mio codice meno nel suo codice CSS corrispondente. 81 00:07:21,010 --> 00:07:26,290 Per fare ciò, lasciami andare nella cartella CSS e poi qui, 82 00:07:26,290 --> 00:07:29,650 vedrai che hai il file styles.less. 83 00:07:29,650 --> 00:07:38,909 Al prompt, digitare lessc styles.less styles.css, 84 00:07:38,909 --> 00:07:43,010 e una volta completata la compilazione, 85 00:07:43,010 --> 00:07:45,580 si avrà il file CSS corrispondente. 86 00:07:45,580 --> 00:07:47,580 Quindi, come vedi ora, 87 00:07:47,580 --> 00:07:53,565 hai meno codice convertito nel codice CSS corrispondente. 88 00:07:53,565 --> 00:07:59,310 Dando un'occhiata al codice CSS generato dal codice meno, 89 00:07:59,310 --> 00:08:02,910 si vedrebbe che questo codice sembra più o meno lo 90 00:08:02,910 --> 00:08:08,075 stesso di quello che abbiamo definito nel nostro file CSS originale. 91 00:08:08,075 --> 00:08:11,270 Con questo, completiamo questo esercizio. 92 00:08:11,270 --> 00:08:15,515 In questo esercizio, abbiamo imparato a scrivere 93 00:08:15,515 --> 00:08:21,525 meno codice e quindi convertirlo automaticamente nel codice CSS corrispondente. 94 00:08:21,525 --> 00:08:26,155 A questo punto, potresti voler salvare le modifiche 95 00:08:26,155 --> 00:08:32,410 al tuo repository Git con il messaggio Esercizio: Less.