1 00:00:00,000 --> 00:00:04,466 [MUSIC] 2 00:00:04,466 --> 00:00:08,813 Questa particolare lezione tratta i preprocessori CSS, 3 00:00:08,813 --> 00:00:11,880 in particolare Less e Sass. 4 00:00:11,880 --> 00:00:17,420 Ora, ovviamente, questi argomenti hanno più a che fare con i 5 00:00:17,420 --> 00:00:22,680 CSS e la definizione delle classi CSS, ma sarebbe inappropriato 6 00:00:22,680 --> 00:00:26,940 per me completare un corso Bootstrap senza 7 00:00:26,940 --> 00:00:31,010 approfondire un po 'i preprocessori CSS. 8 00:00:31,010 --> 00:00:37,265 Semplicemente perché Bootstrap è costruito usando Sass per la sua fonte. 9 00:00:37,265 --> 00:00:41,970 Quindi, esamineremo brevemente i preprocessori CSS, 10 00:00:41,970 --> 00:00:47,682 cosa sono, come sono utili nella definizione delle classi CSS 11 00:00:47,682 --> 00:00:51,166 e perché Bootstrap ne fa uso. 12 00:00:52,972 --> 00:00:58,263 Come probabilmente capirai dalla tua precedente esperienza con i CSS, i 13 00:00:58,263 --> 00:01:00,997 CSS sono ottimi per definire gli stili e 14 00:01:00,997 --> 00:01:06,325 applicare ripetutamente questi stili a vari elementi HTML. 15 00:01:06,325 --> 00:01:11,940 E questo è il modo in cui usiamo i CSS quando definiamo le nostre pagine web. 16 00:01:11,940 --> 00:01:15,080 Ma quando guardi il codice CSS stesso, 17 00:01:15,080 --> 00:01:19,620 inizi a realizzare rapidamente i limiti dei CSS. 18 00:01:19,620 --> 00:01:23,660 Soprattutto se vieni da uno sfondo di programmazione, ti rendi conto che i 19 00:01:23,660 --> 00:01:29,342 CSS non hanno quello che tipicamente ti aspetti in un linguaggio di programmazione, come variabili, 20 00:01:29,342 --> 00:01:34,610 nidificazione di selettori, variabili, espressioni e funzioni. 21 00:01:36,310 --> 00:01:40,580 Ciò significa che scrivere codice CSS diventa ingombrante e 22 00:01:40,580 --> 00:01:44,370 mantenere il codice CSS diventa ingombrante a causa della 23 00:01:44,370 --> 00:01:49,550 mancanza della sintassi tradizionale simile al linguaggio di programmazione. 24 00:01:49,550 --> 00:01:54,770 Ora, qui è dove i preprocessori CSS vengono in nostro soccorso. 25 00:01:55,800 --> 00:02:01,090 Esistono diversi preprocessori CSS popolari che cercano di risolvere alcune 26 00:02:01,090 --> 00:02:07,290 delle carenze dei CSS supportando molte di queste funzionalità. 27 00:02:07,290 --> 00:02:13,000 Due in particolare che ci interessano sono Less e Sass. 28 00:02:14,840 --> 00:02:19,940 Vedremo questi due in modo più dettagliato in questa lezione. 29 00:02:19,940 --> 00:02:24,744 Ora, quando definisci le tue classi CSS usando uno 30 00:02:24,744 --> 00:02:29,760 di questi linguaggi del preprocessore come Less o 31 00:02:29,760 --> 00:02:34,990 Sass, allora alla fine devono essere convertiti in CSS, 32 00:02:34,990 --> 00:02:39,696 ma questo può essere fatto automaticamente prima che il CSS venga utilizzato nella tua pagina web. 33 00:02:39,696 --> 00:02:44,840 Ciò che questi linguaggi di pre-elaborazione ci portano è 34 00:02:44,840 --> 00:02:51,580 più sintassi linguistica di programmazione, come vedremo nelle prossime diapositive. 35 00:02:51,580 --> 00:02:53,620 Esamineremo brevemente Less e Sass. 36 00:02:54,990 --> 00:03:00,890 In particolare, la ragione per cui diamo un'occhiata a questo è perché Bootstrap stesso 37 00:03:00,890 --> 00:03:08,540 usa Sass per definire la sua fonte per le sue classi CSS. 38 00:03:08,540 --> 00:03:12,980 E quindi se entri nella personalizzazione di Bootstrap, 39 00:03:12,980 --> 00:03:16,230 dovresti lavorare con il codice Sass. 40 00:03:16,230 --> 00:03:21,402 Bootstrap 3, che era la versione precedente di Bootstrap, ha usato Less 41 00:03:21,402 --> 00:03:26,260 , e quindi, ho pensato che sarebbe stata una cosa appropriata per coprire sia Less che 42 00:03:26,260 --> 00:03:32,330 Sass, perché sono praticamente simili tra 43 00:03:32,330 --> 00:03:39,960 loro in termini di capacità e di come viene definita la sintassi. 44 00:03:39,960 --> 00:03:45,630 Le caratteristiche tipiche che i preprocessori CSS portano è il supporto per 45 00:03:45,630 --> 00:03:53,340 variabili, selettori di nidificazione, espressioni, funzioni e mixin. 46 00:03:53,340 --> 00:03:59,580 Quindi vedremo alcuni di questi con alcuni esempi nelle prossime diapositive. 47 00:03:59,580 --> 00:04:02,270 La prima cosa che vedremo sono le variabili. 48 00:04:02,270 --> 00:04:05,310 Ora in molte classi CSS che definisci, 49 00:04:05,310 --> 00:04:11,540 potresti avere un uso ripetuto di determinate quantità. 50 00:04:11,540 --> 00:04:16,600 Potrebbe essere più utile definire alcune variabili che 51 00:04:16,600 --> 00:04:21,590 contengono queste quantità e utilizzare queste variabili nella definizione delle classi CSS. 52 00:04:21,590 --> 00:04:24,240 Ecco dove le variabili vengono in tuo soccorso. 53 00:04:24,240 --> 00:04:29,720 Qui, vedremo sia il codice Less che Scss. 54 00:04:29,720 --> 00:04:34,090 Scss è una versione di Sass, 55 00:04:34,090 --> 00:04:40,670 versione più popolare della sintassi di Sass, quindi è per questo che mi concentro su Sss qui. 56 00:04:40,670 --> 00:04:43,420 Quindi, se si definiscono le variabili in Less, 57 00:04:43,420 --> 00:04:47,610 si procederà al nome della variabile con un segno @. 58 00:04:47,610 --> 00:04:55,720 In caso di Scss, si utilizzerà un simbolo del dollaro prima del nome della variabile. 59 00:04:55,720 --> 00:04:57,340 E una volta definite quelle variabili, 60 00:04:57,340 --> 00:05:01,750 è quindi possibile utilizzare quelle variabili quando si definiscono le classi. 61 00:05:01,750 --> 00:05:06,700 Come vedete nell'esempio, dove definiamo l'inversa navbar-come sfondo, 62 00:05:06,700 --> 00:05:11,410 o l'altezza dell'elemento carosello come variabili. 63 00:05:11,410 --> 00:05:16,350 Ora, il vantaggio di definire le variabili all'inizio della classe CSS 64 00:05:16,350 --> 00:05:21,400 è che c'è un singolo punto in cui è possibile aggiornare un valore e 65 00:05:21,400 --> 00:05:27,390 aggiornerà automaticamente tutte le classi CSS che utilizzano questa variabile. 66 00:05:27,390 --> 00:05:31,080 Tipicamente il modo in cui usiamo le variabili nei linguaggi di programmazione. 67 00:05:32,110 --> 00:05:38,340 Le variabili nei linguaggi del preprocessore CSS possono anche avere un proprio ambito. 68 00:05:39,650 --> 00:05:44,510 Molto spesso quando definisci classi CSS, specialmente quando 69 00:05:44,510 --> 00:05:49,760 devi definire classi nidificate all'interno di altre classi, 70 00:05:49,760 --> 00:05:53,330 quindi, molto presto il tuo codice CSS diventa molto ingombrante. 71 00:05:53,330 --> 00:05:58,370 Quindi questo è dove la nidificazione è supportata dai tuoi preprocessori CSS. 72 00:05:58,370 --> 00:06:02,380 Quindi, come si può vedere, è possibile definire ad esempio, una classe carosello, e 73 00:06:02,380 --> 00:06:05,876 all'interno di una classe carosello, è possibile definire una classe elemento carosello. 74 00:06:05,876 --> 00:06:11,900 E allo stesso modo, la sottoclasse immagine all'interno della classe elemento carosello. 75 00:06:11,900 --> 00:06:18,161 Quindi qui puoi vedere che ognuno di questi è nidificato all'interno di una classe precedente. 76 00:06:19,440 --> 00:06:25,410 Con le variabili, è possibile contenere un valore alla volta in una variabile. 77 00:06:25,410 --> 00:06:30,730 Supponiamo di avere un gruppo di variabili che riassumono insieme 78 00:06:30,730 --> 00:06:37,275 dichiarano un insieme di dichiarazioni CSS, che è dove facciamo uso di mixins. 79 00:06:37,275 --> 00:06:42,910 In Less definisci un mixin dandogli un nome, 80 00:06:42,910 --> 00:06:47,650 e in Sass lo 81 00:06:47,650 --> 00:06:52,530 precedi semplicemente con un @mixin davanti al nome della dichiarazione mixin. 82 00:06:52,530 --> 00:06:58,560 E all'interno di un mixin, è possibile definire un gruppo di dichiarazioni CSS 83 00:06:58,560 --> 00:07:03,620 che possono quindi essere riutilizzate per varie classi CSS. 84 00:07:03,620 --> 00:07:08,110 Come vedete in questo esempio qui, definiamo il margine zero 85 00:07:08,110 --> 00:07:12,480 come mixin, sia in Less che in Sass. 86 00:07:12,480 --> 00:07:18,120 Si noti la variazione minore nella sintassi in ciascuno di questi casi. 87 00:07:18,120 --> 00:07:25,250 E poi, è possibile utilizzare questo mixin nella definizione di classi CSS aggiuntive. 88 00:07:25,250 --> 00:07:30,620 Quindi qui potete vedere che per l'intestazione di riga, definiamo il margine zero come 89 00:07:30,620 --> 00:07:35,480 mixin nell'intestazione di riga, il che significa che tutte 90 00:07:35,480 --> 00:07:40,780 queste proprietà dal margine zero saranno ereditate da quella classe di intestazione riga. 91 00:07:40,780 --> 00:07:47,320 I mixins stessi possono assumere parametri aggiuntivi se si desidera definirli. 92 00:07:47,320 --> 00:07:49,970 Quindi, in questo caso, sto definendo 93 00:07:49,970 --> 00:07:54,680 una variazione del mixin a margine zero che abbiamo visto nella diapositiva precedente. 94 00:07:54,680 --> 00:07:59,935 Qui, questo mixin a margine zero prende due parametri, 95 00:07:59,935 --> 00:08:03,011 pad up down e pad sinistro destro. 96 00:08:03,011 --> 00:08:08,840 E con Less, puoi persino specificare il valore predefinito per esso, 97 00:08:08,840 --> 00:08:15,276 ma con Scss devi specificare esplicitamente i valori. 98 00:08:15,276 --> 00:08:20,871 Quindi qui stiamo definendo due diverse proprietà CSS, il margine e il 99 00:08:20,871 --> 00:08:27,880 padding, e quindi il padding stesso utilizza i parametri per il nostro mixin lì. 100 00:08:27,880 --> 00:08:32,300 Quindi, in tal caso, è possibile utilizzare questi mixin come si vede nelle 101 00:08:32,300 --> 00:08:36,997 due classi CSS definite sotto l'intestazione della riga e 102 00:08:36,997 --> 00:08:41,810 il contenuto della riga specificando i loro valori dei parametri 103 00:08:41,810 --> 00:08:46,270 quando si include quel mixin nel cluster CSS. 104 00:08:47,470 --> 00:08:52,570 Non solo, puoi persino eseguire operazioni matematiche su 105 00:08:52,570 --> 00:08:58,120 variabili predefinite quando le usi all'interno delle tue classi CSS. 106 00:08:58,120 --> 00:09:03,470 Quindi qui puoi vedere che ho definito due diversi elementi di carosello 107 00:09:03,470 --> 00:09:05,740 con due diverse dimensioni, e così 108 00:09:05,740 --> 00:09:10,060 puoi vedere che le altezze di ciascuno di essi sono definite in modo diverso. 109 00:09:10,060 --> 00:09:15,105 In un caso sto usando l'altezza predefinita, in un altro caso 110 00:09:15,105 --> 00:09:20,244 sto moltiplicando quell'altezza e quindi la sto usando per definire la 111 00:09:20,244 --> 00:09:25,230 proprietà height all'interno del mio elemento carosello per la classe item large. 112 00:09:25,230 --> 00:09:28,778 Quindi questo tipo di operazioni matematiche sulle 113 00:09:28,778 --> 00:09:33,710 variabili è consentito anche nei linguaggi del preprocessore CSS. 114 00:09:35,060 --> 00:09:40,160 Altre caratteristiche che i preprocessori CSS includono 115 00:09:40,160 --> 00:09:47,365 sono funzioni che consentono di definire funzioni matematiche, meno stringhe. 116 00:09:47,365 --> 00:09:53,015 È anche possibile eseguire operazioni di colore e operazioni di fusione 117 00:09:53,015 --> 00:09:57,915 dei colori utilizzando queste funzioni e farne uso quando si definiscono le classi CSS. 118 00:09:57,915 --> 00:10:01,345 Questo è un po 'avanzato quindi non entrerò troppo nei dettagli lì. 119 00:10:03,470 --> 00:10:11,552 Inoltre, è possibile inserire classi preprocessore CSS predefinite in altre classi. 120 00:10:11,552 --> 00:10:16,680 Ad esempio, se hai una classe Less come definita e 121 00:10:16,680 --> 00:10:20,100 puoi inserire quel file in un altro file Less. 122 00:10:20,100 --> 00:10:23,347 Analogamente, se sono stati definiti file Scss 123 00:10:23,347 --> 00:10:29,210 , è possibile importarli in altri file Scss utilizzando l'operazione di importazione. 124 00:10:29,210 --> 00:10:32,670 La sintassi è la stessa per Less e Sass. 125 00:10:33,890 --> 00:10:40,180 Ora che abbiamo visto alcune caratteristiche dei linguaggi preprocessore CSS, 126 00:10:40,180 --> 00:10:45,520 esaminiamo ora come possiamo effettivamente farne uso facendo un paio di esercizi. 127 00:10:45,520 --> 00:10:49,900 Per prima cosa, faremo un esercizio basato su Meno. 128 00:10:49,900 --> 00:10:53,677 Poi lo seguiremo con un esercizio basato su Sass. 129 00:10:53,677 --> 00:10:57,099 [ MUSIC]