Foundation - Référence Flex Grid SASS
La description
SASS (Syntactically Awesome Stylesheet) est un pré-processeur CSS, qui aide à réduire la répétition avec CSS et fait gagner du temps.
Mixins
La sortie CSS finale est construite en utilisant le mixin. Le mixin peut être utilisé pour construire votre propre structure de classe à partir de ces composants. Voici les mixins utilisés pour créer la sortie CSS finale.
flex-grid-row
Un conteneur est créé pour la ligne de grille flexible, en utilisant ce mixin.
@include flex-grid-row($behavior, $width, $columns, $base) { }| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $behavior Le style de grille par défaut est modifié. |
Mot-clé ou liste | nul |
| 2 | $width Largeur maximale de la ligne. |
Nombre | $ grid-row-width |
| 3 | $columns Définit le nombre de colonnes pour cette ligne. |
Mot-clé ou liste | nul |
| 4 | $base C'est utile pour appeler mixin deux fois sur le même élément car cela crée une sortie dupliquée. |
Booléen | vrai |
flex-grid-column
Les colonnes de grille Flex sont créées à l'aide du mixin. En utilisant la classe unstack sur la ligne flex parente, la colonne peut être étirée sur toute la largeur du conteneur.
@include flex-grid-column($columns, $gutter);| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $columns La fonction flex-grid-column () est référencée pour les valeurs disponibles. |
Mixte | Nul |
| 2 | $gutter Créer un espace entre les colonnes |
Nombre | $ grille-colonne-gouttière |
flex-grid-order
La source de la colonne de grille flexible est modifiée. Le numéro de colonne le plus bas apparaît en premier dans la mise en page.
@include flex-grid-order($order);| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $order Appliquer le numéro de commande. |
Nombre | 0 |
Les fonctions
Ce qui suit est la fonction d'une grille flexible -
flex-grid-column
La propriété flex est calculée pour le poteau de la poutre flexible. La même valeur est acceptée comme fonction de base grid-column () avec les paramètres suivants -
null - Développe la colonne à l'espace complet.
shrink - Contrats la colonne.
flex-grid-column($columns)| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $columns Définissez la largeur de colonne particulière. |
Mixte | nul |