Fondation - Sass Mixins

Importation

Il importe le contenu des mixins SASS qui sont placés sous le fichier scss / util / _mixins.scss . Vous pouvez importer les mixins SASS en utilisant la ligne de code suivante -

@import 'util/mixins';

Référence Sass

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

Mixins

Vous pouvez utiliser les mixins suivants pour créer la structure de classe CSS pour vos composants.

CSS-TRIANGLE

Il est utilisé pour créer des flèches déroulantes, des pips déroulants et bien d'autres. Il utilise le sélecteur <i> & :: before </i> ou <i> & :: after </i> pour attacher un triangle à un élément existant. Il utilise le format suivant -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Il utilise les paramètres suivants tels que spécifiés dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$triangle-size

Il définit la largeur du triangle.

Nombre Aucun
2

$triangle-color

Il définit la couleur du triangle.

Couleur Aucun
3

$triangle-direction

Il définit la direction du triangle comme vers le haut, la droite, le bas ou la gauche.

Mot-clé Aucun

HAMBURGER

Il est utilisé pour créer une icône de menu avec largeur, hauteur, nombre de barres et couleurs. Il utilise le format suivant -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Il utilise les paramètres suivants tels que spécifiés dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il définit la couleur de l'icône.

Couleur Aucun
2

$color-hover

Il définit la couleur lorsque vous survolez l'icône.

Couleur Aucun
3

$width

Il définit la largeur de l'icône.

Nombre Aucun
4

$height

Il définit la hauteur de l'icône.

Nombre Aucun
5

$weight

Il définit le poids des barres individuelles dans l'icône.

Nombre Aucun
6

$bars

Il définit le nombre de barres dans l'icône.

Nombre Aucun

BACKGROUND-TRIANGLE

Il est utilisé pour spécifier l'image d'arrière-plan d'un élément. Il utilise le format suivant -

@include background-triangle($color);

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

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il définit la couleur du triangle.

Couleur $ noir

CLEARFIX

Ce mixin efface automatiquement les éléments enfants, de sorte qu'il n'y a pas besoin de balisage supplémentaire. Il utilise le format suivant -

@include clearfix;

AUTO-WIDTH

Il dimensionne automatiquement les éléments en fonction du nombre d'éléments présents dans le conteneur. Il utilise le format suivant -

@include auto-width($max, $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

$max

Il identifie le nombre maximum d'articles dans le conteneur.

Nombre Aucun
2

$elem

Il utilise une balise pour les sélecteurs frères.

Mot-clé li

DISABLE-MOUSE-OUTLINE

Il est utilisé pour désactiver le contour autour de l'élément lorsqu'il identifie l'action d'entrée de la souris. Il utilise le format suivant -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Il est utilisé pour masquer les éléments et peut être disponible pour les claviers et autres appareils. Il utilise le format suivant -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Il est utilisé pour supprimer les éléments invisibles et inverse la sortie CSS en utilisant le mixin element-invisible () . Il utilise le format suivant -

@include element-invisible-off;

VERTICAL-CENTER

Il est utilisé pour placer les éléments centrés verticalement à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include vertical-center;

HORIZONTAL-CENTER

Il est utilisé pour placer les éléments centrés horizontalement à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include horizontal-center;

ABSOLUTE-CENTER

Il est utilisé pour placer les éléments absolument centrés à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include absolute-center;