LESS : possibilités et utilisation

Auteur(s) de l'article

Yann
Yann
Tous les développeurs frontend vous le diront, les compilateurs CSS vous simplifient vraiment la vie ! En effet, il existe bon nombre de ces « dynamic stylesheet language » comme le SCSS (SASS), le XCSS ou le LESS. Ils ne sont bien évidemment pas tous pareils, certains sont plus OO que d’autres, mais au final, il appartient à chacun d’utiliser celui sur lequel il se sentira le plus à l’aise.
Personnellement, je me suis dirigé vers le LESS qui, bien que légèrement plus limité que le SCSS, est d’une simplicité d’utilisation élémentaire. Je vais donc principalement aborder ce langage plutôt qu’un autre, mais les sujets seront aussi valables pour ses alter ego.

Possibilités illimitées ?

Grâce au LESS, vous n’aurez plus besoin d’écrire cinquante fois chaque couleur. En effet, le premier avantage d’utiliser un tel outil réside dans la création de variables. Définissez votre charte de variables et il ne vous restera plus qu’à les utiliser dans vos feuilles de style. Le jour où vous devrez modifier une couleur ou un autre attribut, vous n’aurez plus besoin de recourir au chercher/remplacer.
// COLOR ----------------------------
@babyBlue: #6dbadf;
@crazyPink: #ff00fb;
@yellowSubmarine: #ffd400;

// RATINGS --------------------------
@containerWidth: 1140px;

// FONT -----------------------------
@titleFont: Din, Helvetica, Arial, sans-serif;
Un autre atout de cette technologie demeure dans la création et l’utilisation de mixins. Ces classes abstraites pourront être réutilisées autant de fois que vous le souhaité avec la possibilité d’entrer des paramètres dynamiques.
Encore une solution qui permet de réduire considérablement la quantité de code saisit.
// MIXINS ---------------------------
.img-responsive {
max-width: 100%;
height: auto;
width: auto;
box-sizing: border-box;
vertical-align: middle;
}

.font-size(@sizeValue) {
@remValue: (@sizeValue/10);
@pxValue: (@sizeValue);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}

// STYLES ---------------------------
body {
.font-size(14px);
img {
.img-responsive();
}
}
Un troisième avantage consiste en l’utilisation de l’héritage simple et intuitif que propose le LESS.
#main-container {
max-width: @containerWidth;
&:hover {
box-shadow: 10px 10px 5px @babyBlue;
}
section {
background-color: @crazyPink;
}
Pour finir, il vous est encore possible d’exécuter des fonctions et des opérations mathématiques, très pratique lors du calcul d’une cote proportionnelle à une autre.
.section {
width: (@containerWidth/3)*0.5;
}

Le choix du compilateur

Il est possible de compiler le LESS de plusieurs façons ; soit en utilisant less.js qui compilera le code coté client, soit utiliser une application qui compilera votre code à chaque enregistrement du fichier. Personnellement, je trouve qu’il n’est pas optimal de compiler côté client, car cela utilisera des ressources et ralentira l’accès au contenu.
Il est donc plus logique d’opter pour la solution software. Vous en trouverez plusieurs comme {LESS}, SimpLESS ou encore LiveReload. De mon côté, j’ai une très nette préférence pour LiveReload, car il est nettement plus intelligent que ses concurrents. En effet, il détecte de manière plus poussée l’import de fichiers et ne compilera pas ces derniers. De plus, cette application dispose de beaucoup d’autres fonctionnalités que je vous laisserai découvrir.

Une utilisation optimale

Après avoir expérimenté tous ces aspects du LESS, il apparait qu’il nous faut nous limiter et nous discipliner pour ne pas atteindre une recomplexification de notre code.
Prenons par exemple l’utilisation de l’héritage. Il peut sembler être un moyen facile d’assurer que vos éléments seront bien appelés, mais vous vous rendrez bien vite compte qu’à partir de trois niveaux, vous ne saurez plus où vous vous trouvez.
body {
marign: 0 10px;
#main-container {
max-width: @containerWidth;
section {
background-color: @babyBlue;
a.link {
text-decoration: none;
}
}
aside {
background-color: @crazyPink;
section {
box-shadow: 10px 10px 5px @babyBlue;
a.sub-nav {
text-decoration: underline;
}
}
// WHERE THE F**K AM I ?!?
}
}
}
Un autre exemple réside dans la création des mixins. Ces dernières ne doivent pas être utilisées pour raccourcir les expressions CSS, car vous sombrerez dans un code qui deviendra trop personnel et rendra les échanges et la coopération difficiles.
// MIXINS ---------------------------
.rel{ position:relative;}
.abs{ position:absolute;}
.fixed{ position:fixed;}
.oh{ overflow:hidden;}
.ib{ display:inline-block;}
.fl{ float:left;}
.fr{ float:right;}

// STYLES ---------------------------
body {
.rel();
.oh();
.block {
.fl();
}
}

Ce credo tu retiendras

Pour conclure est afin de rendre votre code le plus optimal et le plus dynamique possible, vous devrez observer certaines règles :
  • Ne pas descendre à moins de 2, voir 3 niveaux d’héritage.
  • N’utilisez pas les mixins pour créer votre propre langage.
  • Segmentez et ordrez votre code de façon logique (Variables → Mixins → Styles).
  • N’oublier pas que LESS simplifie votre code, ne le compliquez pas inutilement malgré la tentation.

Notre utilisation

Nous utilisons le LESS sur la plupart de nos projets de manière quasi automatique. Après avoir exploré plusieurs approches, nous tentons d’utiliser cet outil avec une pensée durable et dynamique.