Fondation - SASS Mixins

La sortie CSS finale est construite à l'aide du mixin. Le mixin peut être utilisé pour construire votre propre structure de classe à partir de ces composants. Voici le mixin utilisé pour construire la sortie CSS finale.

grille-colonne

la colonne de grille est créée.

@include grid-column($columns, $gutter);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$columns Définit la largeur de la colonne. La fonction grid-column () est référencée pour les valeurs disponibles.	Mixte	$ grid-column-count
2	$gutter Créez un espace entre les colonnes.	Nombre	$ grille-colonne-gouttière

grille-colonne-ligne

Inclut la classe de ligne et de colonne de manière équivalente au même élément. legrid-col-row() est la fonction assumée.

@include grid-column-row($gutter);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$gutter Définit la largeur de chaque côté de la rangée de colonnes des gouttières.	Nombre	$ grille-colonne-gouttière

grille-colonne-collapse

Les gouttières se replient sur la colonne après le retrait du rembourrage. La fonction assumée estgrid-col-collapse()

@include grid-column-collapse;

grid-column-uncollapse

Les gouttières se rétractent sur une colonne après avoir rajouté le rembourrage. La fonction assumée estgrid-col-uncollapse()

@include grid-column-uncollapse;

disposition de la grille

Définit les tailles des éléments enfants afin que le nombre spécifié à $n apparaît dans chaque ligne.

@include grid-layout($n, $selector);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$n Nombre d'éléments à afficher par ligne.	Nombre	Aucun
2	$selector Sélecteur (s) à utiliser pour les éléments enfants.	Chaîne	'.colonne'

grille-colonne-position

Les colonnes sont réorganisées. La fonction assumée estgrid-col-pos().

@include grid-column-position($position);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$position Définit la direction dans laquelle déplacer la colonne en fonction du nombre de colonnes spécifié. Les nombres négatifs poussent la colonne vers la gauche et le nombre positif vers la droite.	Nombre	Aucun

grille-colonne-unposition

La position de la colonne est réinitialisée. La fonction assumée estgrid-col-unpos().

@include grid-column-unposition;

décalage-colonne-grille

La colonne est décalée vers la droite de $nColonnes. La fonction assumée estgrid-col-off().

@include grid-column-offset($n);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$n Toute valeur est transmise acceptée par le mixin grid-column ().	Numéro ou liste	Aucun

grille-colonne-fin

Le comportement par défaut de la dernière colonne d'une ligne est désactivé qui s'aligne sur le bord opposé. La fonction assumée estgrid-col-end().

@include grid-column-end;

contexte de grille

Pour utiliser des colonnes différentes, le comportement des colonnes définies dans ce mixin doit être modifié.

@include grid-context($columns, $root) { }

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$columns Nombre de colonnes à utiliser.	Nombre	Aucun
2	$root À l'intérieur du mixin, les sélecteurs s'emboîtent dans le sélecteur parent lorsqu'il est défini sur false.	Booléen	faux

ligne de grille

Une ligne de grille est créée.

@include grid-row($columns, $behavior, $width, $cf) { }

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$columns Définit le nombre de colonnes pour cette ligne.	Nombre	Nul
2	$behavior Le style de grille par défaut est modifié.	Mots clés	Nul
3	$width Largeur maximale de la ligne.	Nombre	$ grid-row-width
4	$cf Que ce soit pour inclure le clearfix ou non.	Booléen	vrai

grille-colonne-taille

La largeur de la colonne de la grille est définie.

@include grid-column-size($width);

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$width La fonction grid-column () accepte toute valeur passée. Définissez la largeur de la colonne.	Numéro ou liste	$ grid-column-count