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 |