Foundation - Riferimento Flex Video SASS
Descrizione
È possibile modificare gli stili dei componenti utilizzando SASS Reference.
Variabili
La tabella seguente elenca le variabili SASS nel file delle impostazioni di un progetto che rendono personalizzati gli stili predefiniti del componente.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $flexvideo-padding-top Rappresenta l'imbottitura sopra il contenitore del video flessibile. |
Numero | rem-calc (25) |
| 2 | $flexvideo-margin-bottom Rappresenta il margine sotto il contenitore del video flessibile. |
Numero | rem-calc (16) |
| 3 | $flexvideo-ratio Rappresenta l'imbottitura utilizzata per creare un rapporto di aspetto di 4: 3. |
Numero | 4 per 3 |
| 4 | $flexvideo-ratio-widescreen Rappresenta l'imbottitura utilizzata per creare un rapporto di aspetto di 16: 9. |
Numero | 16 da 9 |
Mixins
Per creare l'output CSS finale di questo componente, è possibile utilizzare i seguenti mixin. Per costruire la tua struttura di classe usando i componenti Foundation, puoi usare tu stesso i mixin.
video flessibile
@include flex-video($ratio);Viene utilizzato per creare un contenitore video flessibile. Accetta il parametro $ ratio che è spiegato di seguito.
| Sr.No. | Parametro e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $ratio Rappresenta il rapporto del contenitore e formattato come x per y . |
Elenco | $ flexvideo-ratio |
Funzioni
video flessibile
flex-video($ratio)Crea un'altezza in percentuale che viene utilizzata come imbottitura nel contenitore del video flessibile. Accetta il parametro $ ratio , che è di tipo List . Il parametro $ ratio rappresenta il rapporto del contenitore e formattato come x da y .