@insite/sass-tools

Mixins et fonctions SASS utiles

Installation

Via npm :

npm install @insite/sass-mixins --save

Mixins

arrow.mixin

Faire un triangle en CSS

Documentation . Code

beside-ico.mixin

Place en flex un ico dans un :before ou un :after et change sa taille et sa couleur (via custom props) si besoin

Documentation . Code

beside-img.mixin

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

Documentation . Code

bgi.mixin

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

Documentation . Code

extend-bg.mixin

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

Documentation . Code

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

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

flex.mixin

Syntaxe raccourcie pour le display-flex

Documentation . Code

flex-list.mixin

Mixin de listes responsives déclarative (items/row). Permet un alignement au centre ou à droite mais ne permet plus une surcharge de la variable $breakpoints (enfin si mais xlarge doit rester le dernier point de rupture, on peut néanmoins changer sa valeur ou en ajouter d'autre avant). Cette mixin a été refactorisé (retrait de gap) pour supporter safari <14.1

Documentation . Code

grid-list.mixin

Mixin de listes responsives déclarative (items/row). Ne permet pas un alignement autre qu'à gauche. Mais a un fonctionnement plus simple que flex-list (via gap).

Documentation . Code

auto-flex.mixin

Permet de faire simplement des grilles responsives et d'aligner les items au centre

Documentation . Code

auto-grid.mixin

Permet de faire simplement des grilles responsives

Documentation . Code

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

image-set.mixin

Génère le contenu de image-set(...)

Documentation . Code

link.mixin

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

Documentation . Code

ratio.mixin

Injecte un before au ratio.

Documentation . Code

rem.mixin

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

Documentation . Code

rems.mixin

Permet d'écrire plusieurs propriétés et leur valeur convertie en rem.

Documentation . Code

text-shorten.mixin

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

Documentation . Code

transform.mixin

Syntaxe raccourcie de la propriété transform

Documentation . Code

wrappers.mixin

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

Documentation . Code

Functions

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

get-icon-attr.fnc

Retourne la valeur de l'attribut de l'icon en question

Documentation . Code

get-unit.fnc

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

Documentation . Code

hexa-opacity.fnc

Permet d'opacifier un code hexadecimal sans le convertir en rgb.

Documentation . Code

is-number.fnc

Renvoi true si un nombre est passé à la fonction

Documentation . Code

number.fnc

Converti une chaîne en nombre

Documentation . Code

str-last-index.fnc

Documentation . Code

str-replace.fnc

Permet de remplacer une chaîne de caractères

Documentation . Code

strip-units.fnc

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

Documentation . Code