LESS (langage)

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
LESS
Logo.

Auteur Alexis Sellier
Développeur Alexis Sellier, Dmitry Fadeyev
Typage Typage dynamique
Influencé par CSS, Sass
A influencé Sass
Système d'exploitation Multiplate-forme
Licence Licence Apache
Site web lesscss.org

LESS est un langage dynamique de génération de feuilles de style conçu par Alexis Sellier. Il est influencé par Sass et a influencé "SCSS" (la syntaxe plus récente de Sass) : la syntaxe de LESS est plus proche de CSS[1] et un code CSS est aussi un code LESS valide qui a la même sémantique.

LESS ajoute à CSS les mécanismes suivants : variables, imbrication, mixins, opérateurs et fonctions.

LESS est implémenté en open source. Sa première version a été écrite en Ruby. Dans les versions ultérieures, Ruby a été remplacé par Javascript. Une particularité de LESS par rapport aux autres préprocesseurs CSS est qu'il peut être compilé à la volée, soit lors du rendu par le navigateur, soit côté serveur. Il peut également être compilé à l'avance en un simple fichier CSS.

Variables[modifier | modifier le code]

LESS autorise l'utilisation de variables. Les variables LESS sont préfixées avec un signe arobase (@). Les variables sont affectées par un deux-points (:).

Lors de la compilation, les valeurs des variables sont substituées dans le document CSS.

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

La compilation du code LESS ci-dessus donne le code CSS suivant :

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins[modifier | modifier le code]

Les mixins permettent d'embarquer des propriétés d'une classe dans une autre classe en incluant le nom de la classe dans les propriétés. En supprimant les répétitions, les mixins permettent d'avoir un code plus court (pendant le développement uniquement,une fois compilé, il redevient aussi long que lors d'un développement "normal") et plus facile à modifier, au contraire de CSS qui ne supporte pas les mixins et où tout code doit être répété autant de fois qu'il est utilisé.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  .bordered;
}

La compilation du code LESS ci-dessus donne le code CSS suivant :

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
 
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

LESS dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions.

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

La compilation du code LESS ci-dessus donne le code CSS suivant :

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Imbrication[modifier | modifier le code]

CSS supporte l'imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. LESS permet l'imbrication des sélecteurs à l'intérieur d'autres sélecteurs. Ceci rend l'héritage plus clair et les feuilles de style plus courtes.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px;
      }
    }
  }
}

La compilation du code LESS ci-dessus donne le code CSS suivant :

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Fonctions et operations[modifier | modifier le code]

LESS propose les opérations et fonctions. Les opérations permettent l'addition, la soustraction, la division et la multiplication des valeurs et des couleurs. Ceci peut être utilisé pour créer des relations complexes entre les propriétés.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

La compilation du code LESS ci-dessus donne le code CSS suivant :

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

LESS autorise également l'utilisation d'expressions JavaScript. Elles sont évaluées lors de la compilation du fichier .less en CSS.

Comparaison avec Sass[modifier | modifier le code]

Sass et LESS sont tous deux des préprocesseurs CSS, qui permettent d'écrire des feuilles CSS propres au lieu de règles statiques[2].

À partir de la version 1.4, LESS supporte les règles imbriquées et héritées via les pseudo-sélecteurs &:extends et @extends. Auparavant, la principale différence entre LESS et les autres préprocesseurs comme SASS était le manque d'une directive @extends, qui permettrait d'étendre une classe existante pour lui ajouter plus de règles, ce qui conduirait à un code CSS plus propre, sans règles dupliquées.

LESS est inspiré par Sass[3]. Sass a été conçu à la fois pour simplifier et étendre CSS, ainsi des éléments comme les accolades ont été enlevés de la syntaxe. LESS a été conçu pour être aussi proche que possible de CSS, ainsi la syntaxe est identique à un code CSS. En conséquence, un code CSS peut être utilisé comme un code LESS valide.

Des versions plus récentes de Sass ont également introduit une syntaxe à la CSS appelée SCSS (Sassy CSS)[1].

Pour plus de comparaisons de syntaxe, voir (en) https://gist.github.com/674726.

Comparaison avec ZUSS[modifier | modifier le code]

ZUSS est inspiré par LESS. La syntaxe est similaire, sauf que ZUSS est destiné au langage Java. Contrairement à LESS, il ne nécessite pas l'interpréteur JavaScript (Rhino), et il permet à ZUSS d'appeler les méthodes Java directement.

Utilisation[modifier | modifier le code]

LESS peut être utilisé sur un site de différentes façons. Une possibilité est d'inclure le fichier JavaScript less.js pour convertir le code à la volée. Le navigateur compilera le fichier destination CSS. Une autre possibilité est de compiler le fichier LESS en pur CSS avant le l'uploader sur le site. Avec cette option, il n'y a pas besoin d'uploader de fichier .less et le site n'a pas besoin du convertisseur javascript less.js.

logiciels LESS[modifier | modifier le code]

Name Description Software License Platform Functionality
WinLess Compilateur LESS avec interface graphique Apache 2.0[4] Windows Compilateur
Crunch éditeur et compilateur LESS (nécessite Adobe AIR) GPL[5] Windows Compilateur
Editor
less.js-windows Utilitaire en ligne de commande pour Windows qui compile les fichiers * .less en CSS en utilisant less.js.  ? Windows Compilateur
less.app Compilateur LESS Propriétaire MacOSX Compilateur
CodeKit Compilateur LESS Propriétaire MacOSX Compilateur
SiteFlow Compilateur LESS / SASS / Javascript Propriétaire MacOSX Compilateur
SimpLESS Compilateur LESS  ? Windows
MacOSX
Linux
Compilateur
Chirpy Compile diverses extensions des langages JavaScript et CSS, notamment LESS Ms-PL[6] Visual Studio Plugin Compilateur
Mindscape Web Workbench Coloration syntaxique et Intellisense pour LESS (ainsi que Sass et CoffeeScript) Propriétaire Visual Studio Plugin Compilateur
Coloration syntaxique
Eclipse Plugin for LESS Plugin Eclipse EPL 1.0[7] Eclipse Plugin Coloration syntaxique
Content assist
Application Koala Logiciel de compilation des langages LESS, SASS, Compass et CoffeeScript Apache 2.0 Windows
MacOSX
Linux
Compilateur

Références[modifier | modifier le code]

  1. a et b (en)Sass and Less Sass and Less
  2. (en)What's Wrong With CSS What's Wrong With CSS
  3. (en)About LESS About
  4. [1] WinLess github Issue "License Information"
  5. Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
  6. [2] Chirpy License Information at CodePlex
  7. Eclipse Plugin for LESS homepage Eclipse Plugin for LESS homepage

Liens externes[modifier | modifier le code]

Articles connexes[modifier | modifier le code]