@insite/sass-mixins

Mixins et fonctions SASS utiles

Installation

Via npm :

npm install @insite/sass-mixins --save

Mixins & fonctions

1. arrow.mixin

Faire un triangle en CSS

Documentation . Code

2. beside-img.mixin

Place en flex une image dans un :before ou un :after

Documentation . Code

3. bgi.mixin

Place une image en background, et permet le changement de couleur des svg via mask-image

Documentation . Code

4. extend-bg.mixin

Permet d'étendre le fond à la largeur voulue via un before qui hérite du background

Documentation . Code

5. extend-width.mixin

Permet d'étendre l'élément hors de son wrapper jusqu'à 100vw tout en restant dans le flux html (position:relative)

Documentation . Code

6. file-link--with-crop.mixin

Permet de cropper un lien file et d'ajouter "..." de manière à croper proprement sur les petits écrans. (ex : mon-lien-bcp-trop-long-sur-mob...pdf) Documentation . Code

6. flex.mixin

Syntaxe raccourcie pour le display-flex

Documentation . Code

7. flex-list.mixin

Permet de faire simplement des listes responsives avec flex en conservant l'alignement à gauche et avec des espaces uniquement entre les éléments.

Documentation . Code

8. font.mixin

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

Documentation . Code

9. get-icon.fnc

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.

Documentation . Code

10. get-unit.fnc

Permet de récupérer l'unité de mesure.

Documentation . Code

11. link.mixin

Faire un lien et ses différents états (:link, :visited, :hover, :focus, :active)

Documentation . Code

12. ratio.mixin

Injecte un before au ratio.

Documentation . Code

13. rem.mixin

Permet d'écrire une propriété et sa valeur convertie en rem.

Documentation . Code

14. str-replace.fnc

Permet de remplacer une chaîne de caractères

Documentation . Code

15. strip-units.fnc

Permet retirer l'unité de mesure après un nombre

Documentation . Code

16. text-shorten.mixin

Permet de cropper une chaîne de caractères et d'ajouter des élipses.

Documentation . Code

17. transform.mixin

Syntaxe raccourcie de la propriété transform

Documentation . Code

18. wrappers.mixin

Permet de gérer les wrappers via les padding et non un sous-élément

Documentation . Code