Fondazione - Riferimento Flex Grid SASS
Descrizione
SASS (Syntactically Awesome Stylesheet) è un pre-processore CSS, che aiuta a ridurre la ripetizione con CSS e fa risparmiare tempo.
Mixins
L'output CSS finale viene creato utilizzando il mixin. Il mixin può essere utilizzato per costruire la propria struttura di classi da questi componenti. Di seguito sono riportati i mixin utilizzati per creare l'output CSS finale.
flex-grid-row
Viene creato un contenitore per la riga della griglia flessibile, utilizzando questo mixin.
@include flex-grid-row($behavior, $width, $columns, $base) { }| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$behavior Lo stile di griglia predefinito viene modificato. |
Parola chiave o elenco | nullo |
| 2 |
$width Larghezza massima della riga. |
Numero | $ larghezza riga della griglia |
| 3 |
$columns Imposta il numero di colonne per questa riga. |
Parola chiave o elenco | nullo |
| 4 |
$base È utile per chiamare due volte mixin sullo stesso elemento poiché crea un output duplicato. |
Booleano | vero |
flex-grid-column
Le colonne della griglia flessibile vengono create utilizzando il mixin. Utilizzando la classe unstack sulla riga flex genitore, la colonna può essere allungata per l'intera larghezza del contenitore.
@include flex-grid-column($columns, $gutter);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$columns La funzione flex-grid-column () è riferita per i valori disponibili. |
Misto | Nullo |
| 2 |
$gutter Crea spazio tra le colonne |
Numero | $ grid-column-gutter |
flex-grid-order
L'origine della colonna della griglia flessibile viene modificata. Il numero di colonna più basso viene visualizzato per primo nel layout.
@include flex-grid-order($order);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$order Applica il numero d'ordine. |
Numero | 0 |
Funzioni
La seguente è la funzione di una griglia flessibile:
flex-grid-column
La proprietà flex viene calcolata per la colonna flex gird. Lo stesso valore è accettato come funzione griglia-colonna () di base insieme ai seguenti parametri:
null - Espande la colonna a tutto lo spazio.
shrink - Contratta la colonna.
flex-grid-column($columns)| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$columns Imposta la larghezza della colonna particolare. |
Misto | nullo |