LESS en 10 minutes.

Mon objectif est de vous apprendre toutes les bases de LESS en moins de 10m. Ce n’est pas beaucoup de temps, mais c’est totalement faisable !

Vous êtes prêt ? C’est parti.

Encapsulation

Encapsulation : elle permet de pouvoir structurer, organiser et hiérarchiser les règles selon leur niveau de précision. Cela permet d’avoir du code beaucoup plus propre et lisible, et de vous forcer à écrire des règles plus précises sans prendre des raccourcis foireux (hum hum !important hum hum…).

.meat {
    width: 200px;

    .os {
        font-weight: 900;
        color: #f8f8f8;
    }
}

.meat {
  width: 200px;
}
.meat .os {
  font-weight: 900;
  color: #f8f8f8;
}

Règles parentes : le caractère spécial & est utilisé pour accéder à l’ensemble des règles parentes, afin de rendre l’encapsulation plus flexible (pseudo-classes, symboles…).

.meat {
    &:hover {
        display: none;
    }

    & + .boeuf {
        color: #A24F2D;
    }
}

.meat:hover {
  display: none;
}
.meat + .boeuf {
  color: #A24F2D;
}

Variables

Variables : elles permettent de stocker des valeurs une fois et de les réutiliser partout dans le code. On peut y stocker de tout : nombres, chaînes de caractères, pixels, couleurs…

@width: 200px;
@image: url("../images/cooked-meat.png");

.meat {
    width: @width;
    background-image: @image;
}

.meat {
  width: 200px;
  background-image: url("../images/cooked-meat.png");
}

Interpolation : s’il y a besoin d’intégrer une variable dans une chaîne de caractère ou similaire, c’est possible grâce à une syntaxe spéciale appelée interpolation.

@imageFolder: "../images";

.meat {
    background-image: url("@{imageFolder}/cooked-meat.png");
}

.meat {
  background-image: url("../images/cooked-meat.png");
}

Maps : les variables peuvent aussi se comporter comme des structures (appelés maps) qui permettent de regrouper un ensemble de valeurs similaires.

@cuisson: {
    bleu: #7E1F3B;
    saignant: #81282D;
    apoint: #AB544A;
    biencuit: #E0B09F;
}

.meat {
    color: @cuisson[saignant];
}

.meat {
  color: #81282D;
}

Propriétés : à l’intérieur d’un bloc, les propriétés CSS peuvent aussi être utilisées comme des variables grâce au symbole $.

.meat {
    width: 200px;
    height: $width * 0.8;
}

.meat {
  width: 200px;
  height: 160px;
}

Scope : comme en programmation, les variables déclarées dans un bloc (entre deux accolades) sont inaccessibles à l’extérieur de ce bloc.

.meat {
    @grille: #4F3124;
    border-color: @grille
}

.carrot {
    border-color: @grille; // Erreur
}

Extensions

Extensions : elles permettent à plusieurs règles de partager une ou plusieurs bases communes, comme pour l’héritage en POO.

.food {
    display: flex;
}

.meat:extend(.food) {
    font-weight: 400;
}

.food,
.meat {
  display: flex;
}
.meat {
  font-weight: 400;
}

Mélanges

Mélanges : ils permettent d’inclure un bloc de propriétés déjà existant à l’intérieur d’une autre règle. Ils peuvent se faire avec :

• Des règles CSS normales.

.food {
    display: flex;
}

.meat {
    .food();
    font-weight: 400;
}

.food {
  display: flex;
}
.meat {
  display: flex;
  font-weight: 400;
}

• Des fausses règles, c’est-à-dire des règles uniquement présentes dans LESS, mais pas dans le résultat final en CSS.

.steak-dimension() {
    width: 200px;
    height: 160px;
}

.steak {
    .steak-dimension();
    border-radius: 20px;
}

.steak {
  width: 200px;
  height: 160px;
  border-radius: 20px;
}

• Des fausses règles avec des paramètres, ce qui permet d’avoir des blocs de propriétés communs, mais avec des valeurs différentes.

.steak-dimension(@size) {
    width: @size;
    height: @size * 0.8;
}

.steak {
    .steak-dimension(200px);
}

.bon-gros-steak {
    .steak-dimension(450px);
}

.steak {
  width: 200px;
  height: 160px;
}
.bon-gros-steak {
  width: 450px;
  height: 360px;
}

Opérateurs

Opérateurs arithmétiques : LESS offre la possibilité de pouvoir faire des calculs directement au sein des règles CSS. Utile quand on veut mesurer des dimensions précises. Le principe fonctionne bien sûr aussi avec les variables.

@temps-cuisson: 775;

.meat {
    border-width: 1px * (@temps-cuisson / 50);
}

.meat {
  border-width: 15.5px;
}

Fonctions

Fonctions mathématiques : LESS propose un grand nombre de fonctions mathématiques par défaut afin de permettre de faire plein de calculs précis (arithmétiques, géométriques, traitement des couleurs…) sans avoir à réinventer la roue.

@temps-cuisson: 775;

.meat {
    // Fonction permettant d'arrondir au plus bas
    border-width: 1px * floor(@temps-cuisson / 50);
}

.meat {
  border-width: 15px;
}

Fonctions logiques : ce sont fonctions qui permettent d’instaurer une notion de logique au sein de LESS, comme des booléens, des conditions, des boucles…

@temps-cuisson: 750;
@cuisson: {
    saignant: #81282D;
    apoint: #AB544A;
}

.meat {
    color: if(@temps-cuisson < 1200, @cuisson[saignant], @cuisson[apoint]);
}

.meat {
  color: #81282D;
}

Modules

Modules : ils permettent de pouvoir diviser le code LESS en plusieurs fichiers, et d’importer le code de certains fichiers dans d’autres.

.meat {
    & + .pepper {
        text-decoration: dotted;
        text-decoration-color: #120811;
    }
}

@import "module";

.meat {
    & + .salt {
        text-decoration: dotted;
        text-decoration-color: #EDF7EE;
    }
}

.meat + .pepper {
  text-decoration: dotted;
  text-decoration-color: #120811;
}
.meat + .salt {
  text-decoration: dotted;
  text-decoration-color: #EDF7EE;
}

Si aucune extension n’est spécifiée dans le nom du module, LESS le complète automatiquement par .less.

Installation et utilisation

Pour installer LESS, il faut d’abord installer NodeJS et récupérer less grâce au gestionnaire de paquets npm (installé avec NodeJS).

npm install -g less

Pour utiliser LESS, il suffit d’utiliser la commande lessc input.less output.css, où input est le fichier source (LESS) et output est le fichier de résultat qui contiendra le CSS.

lessc ./style.less ./style.css

Avec ça, vous devriez être capable de faire 95% de ce qu’il y a à faire avec LESS. Pour les 5% restants, je vous laisse aller consulter la documentation, beaucoup plus longue, mais plus complète.

Encore une fois, pensez à mettre l’article en favoris pour pouvoir vous en servir d’antisèche, au cas où vous avez un trou de mémoire (ce qui arrive assez souvent ;) ).

Et si vous pensez que j’ai oublié un truc super important, faites moi signe dans les commentaires en dessous, et j’irais l’ajouter de ce pas ! Et promis, la prochaine fois je ferais un article plus vegan :D