Accueil🇫🇷Chercher

Less (langage)

Less est un langage dynamique de génération de CSS conçu par Alexis Sellier. Initialement inspiré par Sass, il l'influence à son tour avec l'apparition de la syntaxe « SCSS » par laquelle Sass reprend des éléments de la syntaxe CSS classique. Le principe de Less est en effet de ne pas rompre avec la syntaxe CSS[3] : tout code CSS est aussi du code Less valide et sémantiquement équivalent.

Less
Logo.

Date de première version
Auteur Alexis Sellier
Développeur Alexis Sellier, Dmitry Fadeyev
Dernière version 4.1.3 ()[1]
Typage Typage dynamique
Influencé par CSS, Sass
A influencé Sass, Bootstrap
Écrit en JavaScript
Système d'exploitation Multiplateforme
Licence Licence Apache version 2.0[2]
Site web lesscss.org

Less y ajoute notamment les mécanismes suivants : variables, imbrication, mixins, opérateurs et fonctions.

Less est diffusé en open source. Sa première version a été écrite en Ruby, les versions ultérieures en JavaScript. Par rapport aux autres préprocesseurs CSS, il présente la particularité de pouvoir être converti à la volée, soit par le serveur, soit par le navigateur. Il peut également être traduit automatiquement en CSS classique à l'écriture.

Variables

Less permet l'utilisation de variables. Elles sont préfixées par une arobase (@) et le signe d'affectation est le deux-points (:). À la compilation, les valeurs sont substituées aux variables dans le fichier 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

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

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 opérations

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

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

À 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[5]. 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)[3] - [6].

Comparaison avec ZUSS

ZUSS[7] 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

Less peut être utilisé sur un site web de différentes façons.

Une possibilité est d'inclure le script less.js aux pages web pour que le navigateur puisse convertir le code à la volée.

En production, il est préférable de compiler le fichier Less en CSS pur qu'on télécharge sur le serveur. Le travail du navigateur, donc la vitesse d'affichage, en est allégé d'autant.

Logiciels Less

NameDescriptionSoftware LicensePlatformFunctionality
WinLessCompilateur LESS avec interface graphiqueApache 2.0[8]WindowsCompilateur
Crunchéditeur et compilateur LESS (nécessite Adobe AIR)GPL[9]Windows

MacOSX

Linux

Compilateur
Editor
less.js-windowsUtilitaire en ligne de commande pour Windows qui compile les fichiers * .less en CSS en utilisant less.js.MIT[10]WindowsCompilateur
less.appCompilateur LESSPropriétaireMacOSXCompilateur
CodeKitCompilateur LESSPropriétaireMacOSXCompilateur
SiteFlowCompilateur LESS / SASS / JavascriptPropriétaireMacOSXCompilateur
simpless SimpLESSCompilateur LESS ?Windows
MacOSX
Linux
Compilateur
ChirpyCompile diverses extensions des langages JavaScript et CSS, notamment LESSMs-PL[11]Visual Studio PluginCompilateur
Mindscape Web WorkbenchColoration syntaxique et Intellisense pour LESS (ainsi que Sass et CoffeeScript)PropriétaireVisual Studio PluginCompilateur
Coloration syntaxique
Eclipse Plugin for LESSPlugin EclipseEPL 1.0[12]Eclipse PluginColoration syntaxique
Content assist
Application KoalaLogiciel de compilation des langages LESS, SASS, Compass et CoffeeScriptApache 2.0Windows
MacOSX
Linux
Compilateur

Références

  1. « https://github.com/less/less.js/releases/tag/v4.1.3 »
  2. « https://github.com/less/less.js/blob/master/LICENSE »
  3. (en)Sass and Less Sass and Less
  4. (en)What's Wrong With CSS What's Wrong With CSS
  5. (en)About LESS About
  6. (en) https://gist.github.com/674726 : comparaisons de syntaxe LESS et SASS
  7. « Tomyeh/ZUSS », sur GitHub (consulté le ).
  8. WinLess github Issue "License Information"
  9. Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
  10. less.js' LICENSE at github less.js' LICENSE at github
  11. Chirpy License Information at CodePlex
  12. Eclipse Plugin for LESS homepage Eclipse Plugin for LESS homepage

Liens externes

Articles connexes

Cet article est issu de wikipedia. Text licence: CC BY-SA 4.0, Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.