Utilitaires d'agencement


Vue d'ensemble

Sass Swing met à disposition des variables utilitaires au lieu de simple classe pour controller l'agencement. Seulement quelques classes utilitaires sont disponibles pour contrôler les flexbox. Les avantages d'utiliser des variables, sont de ne pas polluer l'attribut class et surtout de permettre de passer des valeurs ou d'autres variables préalablement déclarées. Ces variables sont utiles pour modifier les valeurs des propriétés par défaut des classes utilisées sur un élément.

Le seul désavantage, est que l'on ne peut pas modifier les valeurs, en fonction de la surface d'affichage. Dans ce cas, il faudra créer une classe CSS dédiée.

Liste des variables utilitaires disponibles pour contrôler l'agencement :

--m Marges externes <style="--m:valeur;">

--mx Marges horizontale externes <style="--mx:valeur;">

--my Marges verticale externes <style="--my:valeur;">

--mt Marge externe top <style="--mt:valeur;">

--ml Marge externe left <style="--ml:valeur;">

--mb Marge externe bottom <style="--mb:valeur;">

--mr Marge externe right <style="--mr:valeur;">

--p Marges internes <style="--p:valeur;">

--px Marges horizontale internes <style="--px:valeur;">

--py Marges verticale internes <style="--py:valeur;">

--pt Marge interne top <style="--pt:valeur;">

--pl Marge interne left <style="--pl:valeur;">

--pb Marge interne bottom <style="--pb:valeur;">

--pr Marge interne right <style="--pr:valeur;">

--of Object-fit MDN Référence <style="--of:valeur;">

--w Largeur <style="--w:valeur;">

--minw Largeur minimum <style="--minw:valeur;">

--mw Largeur maximum <style="--mw:valeur;">

--h Hauteur <style="--w:valeur;">

--minh Hauteur minimum <style="--minh:valeur;">

--mh Hauteur maximum <style="--mh:valeur;">

--g Marges flexbox, grid <style="--g:valeur;">

--cg Marges horizontale flexbox, grid <style="--cg:valeur;">

--rg Marges verticale flexbox, grid <style="--rg:valeur;">

--lc Cesure de ligne line-cap <style="--lc:valeur;">

--ta Alignement texte text-align <style="--ta:valeur;">

--zi Z-index <style="--zi:valeur;">

--lh Line-height <style="--lh:valeur;">

--ar Aspect-ratio MDN Référence <style="--ar:valeur;">

Tout comme pour l'attribut class, si le nombre d'utilitaires est égal ou supérieur à 5 dans l'attribut style et que celui-ci est répété à plusieurs endroits dans le code HTML. Il est alors, fortement conseillé de créer une nouvelle classe CSS dédiée afin d'éviter de se répéter et d'optimiser son code.

Classes utilitaires

Sass Swing fournit quelques classes utilitaires pour la gestion des flexbox.

Liste des classes utilitaires pour contrôler les flexbox :

.flex Définit un élément flex en mode colonne
<class="flex">

.iflex Définit un élément en inline-flex
<class="iflex">

.flex--row Passe un élément flex en mode ligne
<class="flex--row">

.flex--column Passe un élément flex en mode colonne
<class="flex--column">

.flex--top Aligne verticalement les éléments enfants en haut
<class="flex flex--top">

.flex--bottom Aligne verticalement les éléments enfants en bas
<class="flex flex--bottom">

.flex--v-center Centre verticalement les éléments enfants
<class="flex flex--v-center">

.flex--center Centre verticalement et horizontalement les éléments enfants
<class="flex flex--center">

.flex--left Aligne horizontalement les éléments enfants à gauche
<class="flex flex--left">

.flex--right Aligne horizontalement les éléments enfants à droite
<class="flex flex--right">

.flex--space-evenly Espace les éléments enfants uniformément
<class="flex flex--space-evenly">

.flex--space-around Ajoute des espaces autour des éléments enfants
<class="flex flex--space-evenly">

.flex--space-between Ajoute un espace entre les éléments enfants
<class="flex flex--space-between">

Même conseil que précédemment, si le nombre de classes utilitaires est égal ou supérieur à 5 dans l'attribut class. Ou si l'élément doit évoluer en fonction des dimensions de la surface d'affichage. Il faudra créer une nouvelle classe CSS dédiée pour ajuster le comportement en fonction de ses désirs.