Simplifiez-vous la vie avec LESS

Par
Difficulté Facile
Note
Durée 2 heures
Thématiques
Mis à jour le mardi 19 novembre 2013

Le CSS est un langage déclaratif simple : la plupart du temps, on applique une valeur à une propriété. Mais de nos jours, avec le développement des attributs propriétaires (vous savez, les fameux -moz-*, -webkit-* et autres), le code se trouve dupliqué en de nombreux endroits.

En voici un exemple typique :

#foo {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* etc. */
}

De même, il est impossible d’imbriquer des sélecteurs en CSS :

/* Impossible d’écrire ceci : */
#foo {
  bar {
    color: #150;
  }
  baz::before {
    content: '[';
  }
  baz::after {
    content: ']';
  }
}

/* Il vous faudra écrire ceci : */
#foo bar{
  color: #150;
}
#foo baz::before {
  content: '[';
}
#foo baz::after {
  content: ']';
}

Enfin, imaginons le cas où il vous faudrait définir une palette de couleurs pour votre site. À chaque changement de couleur, vous devriez éditer vos fichiers à l'aide de la fonction « rechercher / remplacer ». Quelle perte de temps !

Des gens intelligents se sont donc penchés sur la question, et en ont retiré l’observation suivante : « Nous devrions créer un langage dynamique capable de générer des feuilles de style que les navigateurs pourraient comprendre. »

Ainsi naquit LESS.

Citation : lesscss.org

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

Citation : traduction

LESS étend le CSS avec un comportement dynamique, utilisant des variables, des classes abstraites, des opérations et des fonctions. LESS fonctionne aussi bien côté client (IE version 6 et +, Webkit [Ndt : Safari, Chrome, Midori], Firefox) que côté serveur, avec Node.js.

Il est à noter qu’il existe également des implémentations non officielles en PHP, Ruby, Python, etc.

Commençons dès à présent avec l’installation de LESS.


L'auteur