# [@insite](../README.md)/sass-mixins Mixins et fonctions SASS utiles *** ## Installation Via npm : ```sh npm install @insite/sass-mixins --save ``` *** ## Mixins & fonctions ##### 1. arrow.mixin Faire un triangle en CSS [Documentation](docs/arrow.mixin.md) . [Code](scss/_arrow.mixin.scss) # ##### 2. beside-img.mixin Place en flex une image dans un :before ou un :after [Documentation](docs/beside-img.mixin.md) . [Code](scss/_beside-img.mixin.scss) # ##### 3. bgi.mixin Place une image en background, et permet le changement de couleur des svg via mask-image [Documentation](docs/bgi.mixin.md) . [Code](scss/_bgi.mixin.scss) # ##### 4. extend-bg.mixin Permet d'étendre le fond à la largeur voulue via un before qui hérite du background [Documentation](docs/extend-bg.mixin.md) . [Code](scss/_extend-bg.mixin.scss) # ##### 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](docs/extend-width.mixin.md) . [Code](scss/_extend-width.mixin.scss) # ##### 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](docs/file-link--with-crop.mixin.md) . [Code](scss/_file-link--with-crop.mixin.scss) # ##### 6. flex.mixin Syntaxe raccourcie pour le display-flex [Documentation](docs/flex.mixin.md) . [Code](scss/_flex.mixin.scss) # ##### 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](docs/flex-list.mixin.md) . [Code](scss/_flex-list.mixin.scss) # ##### 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](docs/font.mixin.md) . [Code](scss/_font.mixin.scss) # ##### 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](docs/get-icon.fnc.md) . [Code](scss/_get-icon.fnc.scss) # ##### 10. get-unit.fnc Permet de récupérer l'unité de mesure. [Documentation](docs/get-unit.fnc.md) . [Code](scss/_get-unit.fnc.scss) # ##### 11. link.mixin Faire un lien et ses différents états (:link, :visited, :hover, :focus, :active) [Documentation](docs/link.mixin.md) . [Code](scss/_link.mixin.scss) # ##### 12. ratio.mixin Injecte un before au ratio. [Documentation](docs/ratio.mixin.md) . [Code](scss/_ratio.mixin.scss) # ##### 13. rem.mixin Permet d'écrire une propriété et sa valeur convertie en rem. [Documentation](docs/rem.mixin.md) . [Code](scss/_rem.mixin.scss) # ##### 14. str-replace.fnc Permet de remplacer une chaîne de caractères [Documentation](docs/str-replace.fnc.md) . [Code](scss/_str-replace.fnc.scss) # ##### 15. strip-units.fnc Permet retirer l'unité de mesure après un nombre [Documentation](docs/strip-units.fnc.md) . [Code](scss/_strip-units.fnc.scss) # ##### 16. text-shorten.mixin Permet de cropper une chaîne de caractères et d'ajouter des élipses. [Documentation](docs/text-shorten.mixin.md) . [Code](scss/_text-shorten.mixin.scss) # ##### 17. transform.mixin Syntaxe raccourcie de la propriété transform [Documentation](docs/transform.mixin.md) . [Code](scss/_transform.mixin.scss) # ##### 18. wrappers.mixin Permet de gérer les wrappers via les padding et non un sous-élément [Documentation](docs/wrappers.mixin.md) . [Code](scss/_wrappers.mixin.scss) #