@insite/sass-mixins
Mixins et fonctions SASS utiles
Via npm :
npm install @insite/sass-mixins --save
Faire un triangle en CSS
Place en flex une image dans un :before ou un :after
Place une image en background, et permet le changement de couleur des svg via mask-image
Permet d'étendre le fond à la largeur voulue via un before qui hérite du background
Permet d'étendre l'élément hors de son wrapper jusqu'à 100vw tout en restant dans le flux html (position:relative)
Syntaxe raccourcie pour le display-flex
Permet de faire simplement des listes responsives avec flex en conservant l'alignement à gauche et avec des espaces uniquement entre les éléments.
Syntaxe raccourcie pour les fonts. Converti les px en rem pour le font-size et le line-height si l'unité d'entrée est le px
Permet de récupérer un icon svg en dataUri et éventuellement d'injecter une couleur via le remplacement des %%COLOR%% présents dans le svg.
Permet de récupérer l'unité de mesure.
Faire un lien et ses différents états (:link, :visited, :hover, :focus, :active)
Injecte un before au ratio.
Permet d'écrire une propriété et sa valeur convertie en rem.
Permet de remplacer une chaîne de caractères
Permet retirer l'unité de mesure après un nombre
Permet de cropper une chaîne de caractères et d'ajouter des élipses.
Syntaxe raccourcie de la propriété transform
Permet de gérer les wrappers via les padding et non un sous-élément