Fondazione - SASS 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.
griglia-colonna
viene creata la colonna della griglia.
@include grid-column($columns, $gutter);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $columns Imposta la larghezza della colonna. La funzione grid-column () è riferita per i valori disponibili. |
Misto | $ grid-column-count |
| 2 | $gutter Crea spazio tra le colonne. |
Numero | $ grid-column-gutter |
griglia-colonna-riga
Include la classe di riga e colonna in modo equivalente allo stesso elemento. Ilgrid-col-row() è la funzione assunta.
@include grid-column-row($gutter);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $gutter Imposta la larghezza su entrambi i lati della riga di colonne delle grondaie. |
Numero | $ grid-column-gutter |
grid-column-collapse
Le grondaie collassano sulla colonna dopo che l'imbottitura è stata rimossa. La funzione assunta ègrid-col-collapse()
@include grid-column-collapse;grid-column-uncollapse
Le grondaie si aprono su una colonna dopo aver aggiunto nuovamente l'imbottitura. La funzione assunta ègrid-col-uncollapse()
@include grid-column-uncollapse;layout della griglia
Imposta le dimensioni per gli elementi figlio in modo che il numero specificato in $n appare in ogni riga.
@include grid-layout($n, $selector);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $n Numero di elementi su cui visualizzare per riga. |
Numero | Nessuna |
| 2 | $selector Selettore / i da utilizzare per gli elementi figlio. |
Corda | '.colonna' |
griglia-colonna-posizione
Le colonne vengono riorganizzate. La funzione assunta ègrid-col-pos().
@include grid-column-position($position);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $position Imposta la direzione per spostare la colonna in base al numero di colonne specificato. I numeri negativi spingono la colonna a sinistra e il numero positivo a destra. |
Numero | Nessuna |
griglia-colonna-unposition
La posizione della colonna viene ripristinata. La funzione assunta ègrid-col-unpos().
@include grid-column-unposition;griglia-colonna-offset
La colonna è spostata a destra di $ncolonne. La funzione assunta ègrid-col-off().
@include grid-column-offset($n);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $n Qualsiasi valore viene passato accettato dal mixin grid-column (). |
Numero o elenco | Nessuna |
griglia-colonna-fine
Il comportamento predefinito dell'ultima colonna di una riga è disabilitato che si allinea al bordo opposto. La funzione assunta ègrid-col-end().
@include grid-column-end;contesto-griglia
Per utilizzare colonne diverse, è necessario modificare il comportamento delle colonne definite all'interno di questo mixin.
@include grid-context($columns, $root) { }| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $columns Numero di colonne da utilizzare. |
Numero | Nessuna |
| 2 | $root All'interno del mixin i selettori si annideranno all'interno del selettore genitore quando è impostato come falso. |
Booleano | falso |
griglia
Viene creata una riga Grid.
@include grid-row($columns, $behavior, $width, $cf) { }| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $columns Imposta il numero di colonne per questa riga. |
Numero | Nullo |
| 2 | $behavior Lo stile di griglia predefinito viene modificato. |
Parole chiave | Nullo |
| 3 | $width Larghezza massima della riga. |
Numero | $ larghezza riga della griglia |
| 4 | $cf Se includere o meno il clearfix. |
Booleano | vero |
dimensione della colonna della griglia
La larghezza della colonna della griglia è impostata.
@include grid-column-size($width);| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $width La funzione grid-column () accetta qualsiasi valore passato. Imposta la larghezza della colonna. |
Numero o elenco | $ grid-column-count |