Fondation - Fonctions Sass

Foundation fournit un ensemble de fonctions utilitaires SASS, qui peuvent être utilisées avec util , couleur , sélecteur , unité , valeur et bien d'autres.

Vous pouvez importer tous les fichiers utilitaires à la fois en utilisant la ligne de code suivante -

@import 'util/util';

Vous pouvez également importer des fichiers utilitaires individuels comme indiqué ci-dessous -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Référence Sass

Vous pouvez modifier les styles des composants à l'aide des fonctions SASS suivantes.

premier plan

Il fournit la couleur de premier plan aux éléments en fonction de la couleur d'arrière-plan. Il utilise le format suivant pour attribuer différents types de paramètres -

foreground($color, $yes, $no, $threshold)

Les paramètres ci-dessus sont spécifiés dans le tableau suivant -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$color Il vérifie la légèreté de la couleur.	Couleur	Aucun
2	$yes Si la couleur est claire, elle renvoie la couleur $ yes .	Couleur	$ noir
3	$no Si la couleur est foncée, elle renvoie $ no color.	Couleur	$ blanc
4	$threshold Il représente le seuil de la légèreté.	Pourcentage	60%

échelle intelligente

Il apporte une couleur appropriée aux éléments en fonction de sa légèreté. Il utilise le format suivant pour spécifier la couleur appropriée -

smart-scale($color, $scale, $threshold)

Les paramètres donnés ci-dessus sont spécifiés dans le tableau suivant -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$color Il est utilisé pour mettre à l'échelle la couleur.	Couleur	Aucun
2	$scale Il spécifie le pourcentage à augmenter ou à réduire.	Pourcentage	5%
3	$threshold Il représente le seuil de la légèreté.	Pourcentage	40%

entrées de texte

Il crée un sélecteur lors de l'utilisation du type d'entrée de texte. Il utilise le format suivant pour spécifier les types d'entrée -

text-inputs($types)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$types Il fournit un certain nombre de types d'entrée de texte pour générer un sélecteur.	Couleur	-

bande-unité

Il supprime l'unité de la valeur et renvoie uniquement le nombre. Il utilise le format suivant pour supprimer l'unité de la valeur -

strip-unit($num)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$num Il spécifie le nombre lorsque vous supprimez l'unité de la valeur.	Couleur	Aucun

rem-calc

Il modifie la valeur du pixel pour correspondre aux valeurs rem. Il utilise le format suivant pour convertir les valeurs de pixel en valeurs rem -

rem-calc($values, $base)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$values Il convertit les valeurs de pixel en valeurs rem et les sépare à l'aide d'espaces. Si vous convertissez une liste séparée par des virgules, placez la liste entre parenthèses.	Numéro ou liste	Aucun
2	$base Il fournit la valeur de base lors de la conversion du pixel en valeur rem. S'il y a une valeur nulle pour la base, alors function utilise la variable $ base-font-size comme base.	Nombre	nul

a de la valeur

Il spécifie la valeur si elle n'est pas fausse. Les fausses valeurs incluent null, aucun, 0 ou une liste vide. Il utilise le format suivant pour spécifier la valeur -

has-value($val)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$val Il vérifie la valeur spécifiée.	Mixte	Aucun

get-side

Il spécifie le côté d'une valeur et définit les valeurs haut / droite / bas / gauche sur le remplissage, la marge, etc. Il utilise le format suivant pour spécifier le côté d'une valeur -

has-value($val)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$val Il spécifie le côté d'une valeur.	Liste ou numéro	Aucun
2	$side Il détermine de quel côté la valeur (haut / droite / bas / gauche) doit retourner.	Mot-clé	Aucun

get-border-value

Il détermine la valeur limite d'un élément. Il utilise le format suivant pour spécifier la valeur de la bordure -

get-border-value($val, $elem)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$val Il trouve une valeur spécifique de la frontière.	liste	Aucun
2	$elem Il est utilisé pour extraire le composant de bordure.	Mot-clé	Aucun