[MUSIC]
Questa particolare lezione tratta i preprocessori CSS,
in particolare Less e Sass.
Ora, ovviamente, questi argomenti hanno più a che fare con i
CSS e la definizione delle classi CSS, ma sarebbe inappropriato
per me completare un corso Bootstrap senza
approfondire un po 'i preprocessori CSS.
Semplicemente perché Bootstrap è costruito usando Sass per la sua fonte.
Quindi, esamineremo brevemente i preprocessori CSS,
cosa sono, come sono utili nella definizione delle classi CSS
e perché Bootstrap ne fa uso.
Come probabilmente capirai dalla tua precedente esperienza con i CSS, i
CSS sono ottimi per definire gli stili e
applicare ripetutamente questi stili a vari elementi HTML.
E questo è il modo in cui usiamo i CSS quando definiamo le nostre pagine web.
Ma quando guardi il codice CSS stesso,
inizi a realizzare rapidamente i limiti dei CSS.
Soprattutto se vieni da uno sfondo di programmazione, ti rendi conto che i
CSS non hanno quello che tipicamente ti aspetti in un linguaggio di programmazione, come variabili,
nidificazione di selettori, variabili, espressioni e funzioni.
Ciò significa che scrivere codice CSS diventa ingombrante e
mantenere il codice CSS diventa ingombrante a causa della
mancanza della sintassi tradizionale simile al linguaggio di programmazione.
Ora, qui è dove i preprocessori CSS vengono in nostro soccorso.
Esistono diversi preprocessori CSS popolari che cercano di risolvere alcune
delle carenze dei CSS supportando molte di queste funzionalità.
Due in particolare che ci interessano sono Less e Sass.
Vedremo questi due in modo più dettagliato in questa lezione.
Ora, quando definisci le tue classi CSS usando uno
di questi linguaggi del preprocessore come Less o
Sass, allora alla fine devono essere convertiti in CSS,
ma questo può essere fatto automaticamente prima che il CSS venga utilizzato nella tua pagina web.
Ciò che questi linguaggi di pre-elaborazione ci portano è
più sintassi linguistica di programmazione, come vedremo nelle prossime diapositive.
Esamineremo brevemente Less e Sass.
In particolare, la ragione per cui diamo un'occhiata a questo è perché Bootstrap stesso
usa Sass per definire la sua fonte per le sue classi CSS.
E quindi se entri nella personalizzazione di Bootstrap,
dovresti lavorare con il codice Sass.
Bootstrap 3, che era la versione precedente di Bootstrap, ha usato Less
, e quindi, ho pensato che sarebbe stata una cosa appropriata per coprire sia Less che
Sass, perché sono praticamente simili tra
loro in termini di capacità e di come viene definita la sintassi.
Le caratteristiche tipiche che i preprocessori CSS portano è il supporto per
variabili, selettori di nidificazione, espressioni, funzioni e mixin.
Quindi vedremo alcuni di questi con alcuni esempi nelle prossime diapositive.
La prima cosa che vedremo sono le variabili.
Ora in molte classi CSS che definisci,
potresti avere un uso ripetuto di determinate quantità.
Potrebbe essere più utile definire alcune variabili che
contengono queste quantità e utilizzare queste variabili nella definizione delle classi CSS.
Ecco dove le variabili vengono in tuo soccorso.
Qui, vedremo sia il codice Less che Scss.
Scss è una versione di Sass,
versione più popolare della sintassi di Sass, quindi è per questo che mi concentro su Sss qui.
Quindi, se si definiscono le variabili in Less,
si procederà al nome della variabile con un segno @.
In caso di Scss, si utilizzerà un simbolo del dollaro prima del nome della variabile.
E una volta definite quelle variabili,
è quindi possibile utilizzare quelle variabili quando si definiscono le classi.
Come vedete nell'esempio, dove definiamo l'inversa navbar-come sfondo,
o l'altezza dell'elemento carosello come variabili.
Ora, il vantaggio di definire le variabili all'inizio della classe CSS
è che c'è un singolo punto in cui è possibile aggiornare un valore e
aggiornerà automaticamente tutte le classi CSS che utilizzano questa variabile.
Tipicamente il modo in cui usiamo le variabili nei linguaggi di programmazione.
Le variabili nei linguaggi del preprocessore CSS possono anche avere un proprio ambito.
Molto spesso quando definisci classi CSS, specialmente quando
devi definire classi nidificate all'interno di altre classi,
quindi, molto presto il tuo codice CSS diventa molto ingombrante.
Quindi questo è dove la nidificazione è supportata dai tuoi preprocessori CSS.
Quindi, come si può vedere, è possibile definire ad esempio, una classe carosello, e
all'interno di una classe carosello, è possibile definire una classe elemento carosello.
E allo stesso modo, la sottoclasse immagine all'interno della classe elemento carosello.
Quindi qui puoi vedere che ognuno di questi è nidificato all'interno di una classe precedente.
Con le variabili, è possibile contenere un valore alla volta in una variabile.
Supponiamo di avere un gruppo di variabili che riassumono insieme
dichiarano un insieme di dichiarazioni CSS, che è dove facciamo uso di mixins.
In Less definisci un mixin dandogli un nome,
e in Sass lo
precedi semplicemente con un @mixin davanti al nome della dichiarazione mixin.
E all'interno di un mixin, è possibile definire un gruppo di dichiarazioni CSS
che possono quindi essere riutilizzate per varie classi CSS.
Come vedete in questo esempio qui, definiamo il margine zero
come mixin, sia in Less che in Sass.
Si noti la variazione minore nella sintassi in ciascuno di questi casi.
E poi, è possibile utilizzare questo mixin nella definizione di classi CSS aggiuntive.
Quindi qui potete vedere che per l'intestazione di riga, definiamo il margine zero come
mixin nell'intestazione di riga, il che significa che tutte
queste proprietà dal margine zero saranno ereditate da quella classe di intestazione riga.
I mixins stessi possono assumere parametri aggiuntivi se si desidera definirli.
Quindi, in questo caso, sto definendo
una variazione del mixin a margine zero che abbiamo visto nella diapositiva precedente.
Qui, questo mixin a margine zero prende due parametri,
pad up down e pad sinistro destro.
E con Less, puoi persino specificare il valore predefinito per esso,
ma con Scss devi specificare esplicitamente i valori.
Quindi qui stiamo definendo due diverse proprietà CSS, il margine e il
padding, e quindi il padding stesso utilizza i parametri per il nostro mixin lì.
Quindi, in tal caso, è possibile utilizzare questi mixin come si vede nelle
due classi CSS definite sotto l'intestazione della riga e
il contenuto della riga specificando i loro valori dei parametri
quando si include quel mixin nel cluster CSS.
Non solo, puoi persino eseguire operazioni matematiche su
variabili predefinite quando le usi all'interno delle tue classi CSS.
Quindi qui puoi vedere che ho definito due diversi elementi di carosello
con due diverse dimensioni, e così
puoi vedere che le altezze di ciascuno di essi sono definite in modo diverso.
In un caso sto usando l'altezza predefinita, in un altro caso
sto moltiplicando quell'altezza e quindi la sto usando per definire la
proprietà height all'interno del mio elemento carosello per la classe item large.
Quindi questo tipo di operazioni matematiche sulle
variabili è consentito anche nei linguaggi del preprocessore CSS.
Altre caratteristiche che i preprocessori CSS includono
sono funzioni che consentono di definire funzioni matematiche, meno stringhe.
È anche possibile eseguire operazioni di colore e operazioni di fusione
dei colori utilizzando queste funzioni e farne uso quando si definiscono le classi CSS.
Questo è un po 'avanzato quindi non entrerò troppo nei dettagli lì.
Inoltre, è possibile inserire classi preprocessore CSS predefinite in altre classi.
Ad esempio, se hai una classe Less come definita e
puoi inserire quel file in un altro file Less.
Analogamente, se sono stati definiti file Scss
, è possibile importarli in altri file Scss utilizzando l'operazione di importazione.
La sintassi è la stessa per Less e Sass.
Ora che abbiamo visto alcune caratteristiche dei linguaggi preprocessore CSS,
esaminiamo ora come possiamo effettivamente farne uso facendo un paio di esercizi.
Per prima cosa, faremo un esercizio basato su Meno.
Poi lo seguiremo con un esercizio basato su Sass.
[ MUSIC]