La venue des preprocesseurs CSS (SCSS, LESS, etc…) se démocratise, et pourtant leur utilisation courante se limite à :

  • le coté pratique des nested;
  • quelques fonctions de base (sur les couleurs);
  • le calcul de certaines propriétés (addiotion de padding, …);
  • la définition de quelques mixins.

C’est bien dommage, car le pré-processing permet bien plus. Voici un exemple de mise en oeuvre de variables à nom dynamique, très utile lorsque vous construisez des chartes graphiques cohérente et ayant des variantes par exemple.

LessCss: exemple de variables dynamiques

Prenons par exemple la définition d’un pattern de couleur. Il s’agit de définir l’ensemble des couleurs de base que vous allez utiliser sur votre site. Dans le code, ça se traduit par un ensemble de variables couleurs auxquelles vous vous limiterez dans vos fichiers less.

Avec cette palette de couleur, nous allons la réutiliser dans plusieurs classes plus métier. Par exemple, si on cherche à générer le code suivant :

@color-danger: #f00;
@color-info: #36f;
.my-class-danger {
color: #f00; // = @color-danger
}
.my-class-info {
color: #36f; // = @color-info
}

Nous pourrons le faire en less très facilement :

// La palette de couleurs

@danger-color: #f33;
@info-color: #36f;

// Fonction chargeant automatiquement la bonne couleur demandée en argument et l'appliquant au contenu
.color-variant(@name) {
@colorstr: "@{name}-color";
@color: @@colorstr;
color: @color;
}

// La définition des classes
.my-class-danger {
.color-variant(danger);
}
.my-class-info {
.color-variant(info);
}

L’avantage, c’est que demain, vous pourrez rajouter une nouvelle couleur à votre palette de couleur (par exemple @color-warning) et utiliser sa déclinaison. En adjoignant ça a des loop, vous pouvez générer des variantes de composants en quelques lignes à peine !