IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction à LESS

LESS est un langage de définition de feuille de style très similaire à CSS par la syntaxe, mais avec plus de fonctionnalités :

  • variables ;
  • expressions ;
  • fonctions ;
  • structuration du code.

Rien de moins.
Mais beaucoup plus. Vous y trouverez tout ce dont vous avez besoin !

Cet article est une traduction enrichie de An Introduction to Less publié sur le site de l'auteur.

6 commentaires Donner une note à l´article (4.5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. En deux mots…

Comme CSS, LESS est un langage de définition de feuille de style.

LESS est plus facile à utiliser que CSS et offre beaucoup de fonctionnalités très intéressantes.

LESS doit être compilé pour générer du code CSS :

  • soit automatiquement au chargement de la page (pratique en phase de développement) ;
  • soit durant une phase de compilation pour produire un fichier CSS (recommandé en production).

Attention : si vous utilisez LESS pendant plus de 10 minutes, vous deviendrez dépendant et souffrirez beaucoup si vous venez par la suite à devoir écrire ou maintenir du CSS. Continuez à vos risques et périls !

II. Fonctionnalités principales

Voici un aperçu des fonctionnalités les plus intéressantes autour desquelles s'articulent la plupart des feuilles de styles LESS. Pour une liste exhaustive, reportez-vous à la documentation de LESS : http://lesscss.org/

II-A. Variables

Tout d'abord, avec LESS, vous pouvez déclarer des variables…

 
Sélectionnez
@themeColor: #6dd;
@themeBackground: #cfe;@themeColor: #6dd;
@themeBackground: #cfe;

… que vous pouvez utiliser partout où vous en avez besoin :

 
Sélectionnez
body {
    color: @themeColor;
    background-color: @themeBackground;
}
         
.floating-box {
    border: 1px solid @themeColor;
}
         
a, a:hover, a:focus, a:active, a:visited {
    color: @themeColor;
}
         
a:focus, button:focus {
    outline-color: @themeColor;
}body {
    color: @themeColor;
    background-color: @themeBackground;
}
         
.floating-box {
    border: 1px solid @themeColor;
}
         
a, a:hover, a:focus, a:active, a:visited {
    color: @themeColor;
}
         
a:focus, button:focus {
    outline-color: @themeColor;
}

En plus de rendre le code plus lisible et maintenable, les variables permettent de faire une distinction claire entre ce qui est destiné à être changé pour obtenir un style différent et ce qui est de l'ordre du comportement en dur. En pratique, vous pouvez avoir une zone « variables » en haut du fichier LESS (ou même dans un fichier à part), dans laquelle le thème est décrit de manière simple et centralisée. C'est par exemple ce que fait Bootstrap avec le fichier variables.less.

L'utilité des variables ne se limite pas à la définition des couleurs du thème. Par exemple, on peut écrire :

 
Sélectionnez
@space: @10px;
@tinySpace: @2px;@space: @10px;
@tinySpace: @2px;

et réutiliser la variable ainsi définie pour spécifier des marges, des espacements…

 
Sélectionnez
h2, h3 {
    margin-top: @space;
}h2, h3 {
    margin-top: @space;
}

… et même d'autres variables :

 
Sélectionnez
@defaultPadding: @tinySpace @space;
 
.notification {
    padding: @defaultPadding;
}
         
.popup .header {
    padding: @defaultPadding;
}@defaultPadding: @tinySpace @space;
 
.notification {
    padding: @defaultPadding;
}
         
.popup .header {
    padding: @defaultPadding;
}

II-B. Fonctions et expressions

LESS fournit un ensemble de fonctions permettant d'écrire des choses très intuitives, comme ceci :

 
Sélectionnez
a:hover {
    color: darken(@themeColor, 20%);
}a:hover {
    color: darken(@themeColor, 20%);
}

ou ceci :

 
Sélectionnez
h2 {
    margin-top: (@space * 2);
}h2 {
    margin-top: (@space * 2);
}

De nombreuses fonctions apportent à peu près tout ce qui est nécessaire pour définir le style d'une application Web.

II-C. Structuration

La possibilité d'imbriquer les règles permet de structurer le code. Cette fonctionnalité permet d'écrire un code plus clair, car chaque fichier peut être décomposé en sections, sous-sections, etc. Typiquement, chaque classe CSS décrivant un rôle dans l'interface graphique, ou n'importe quel sous-ensemble du document identifiable par un sélecteur CSS peut être une section. Les règles figurant à l'intérieur de la section s'appliquent uniquement aux descendants.

Par exemple, le code CSS suivant :

 
Sélectionnez
#header {
    ...
}
         
#header ul {
    ...
}
 
#header ul > li {
    ...
}
 
#header ul > li.divider {
    ...
}
#header ul > li:hover {
    ...
}
#logout-link {
    ...
}#header {
    ...
}
         
#header ul {
    ...
}
 
#header ul > li {
    ...
}
 
#header ul > li.divider {
    ...
}
#header ul > li:hover {
    ...
}
#logout-link {
    ...
}

s'écrirait ainsi avec LESS :

 
Sélectionnez
#header {
...
    ul {
        ...
        > li {
            ...
            &.divider {
                ...
            }
            &:hover {
                ...
            }
        }
    }
    #logout-link {
        ...
    }
}#header {
...
    ul {
        ...
        > li {
            ...
            &.divider {
                ...
            }
            &:hover {
                ...
            }
        }
    }
    #logout-link {
        ...
    }
}

Chacun jugera de la syntaxe la plus agréable… et si le nom LESS se justifie.

Note : un bloc sert aussi de périmètre de visibilité pour les variables.

II-D. Mixins

Un mixin peut être vu comme une sorte de macro acceptant éventuellement des paramètres. Pour chaque utilisation qui en est faite, le contenu du mixin sera copié lors de la compilation en remplaçant les variables par les valeurs spécifiées. Cette fonctionnalité aide beaucoup à diminuer la redondance du code pour certaines constructions. Exemple :

 
Sélectionnez
.shadow(@spread, @color) {
    -moz-box-shadow: 0px 0px @spread @color
    -webkit-box-shadow: 0px 0px @spread @color
    -ms-filter: filter:progid:DXImageTransform.Microsoft.Shadow(color=@color, Direction=135, Strength=@spread)
    box-shadow: 0px 0px @spread @color
}
 
.popup {
    .shadow(10, #000);
    ...
}
 
.dashboard .widget {
    .shadow(5, #888);
    ...
}.shadow(@spread, @color) {
    -moz-box-shadow: 0px 0px @spread @color
    -webkit-box-shadow: 0px 0px @spread @color
    -ms-filter: filter:progid:DXImageTransform.Microsoft.Shadow(color=@color, Direction=135, Strength=@spread)
    box-shadow: 0px 0px @spread @color
}
 
.popup {
    .shadow(10, #000);
    ...
}
 
.dashboard .widget {
    .shadow(5, #888);
    ...
}

À première vue, cette fonctionnalité peut sembler être du sucre syntaxique, mais il ne faut pas la sous-estimer.

Elle permet de factoriser beaucoup de code qui ne pourrait pas l'être autrement, ainsi que de simplifier et de rendre le code plus lisible en donnant un nom unique aux attributs déclinés par type de vendeur.

Elle a également un bénéfice sur la pureté du document HTML. Par exemple, si on veut avoir des ombres sur plusieurs composants dans une application Web, on est quasiment obligé d'avoir une classe CSS shadow sous peine de forte duplication du code CSS implémentant l'ombre. Ceci n'est pas souhaitable (même si c'est un moindre mal) car de l'information de style (avoir une ombre) se retrouve dans le document HTML et non dans le code CSS. Dans l'exemple ci-dessus, l'utilisation du mixin shadow() dans les blocs décrivant un composant devant avoir une ombre permet de remettre cette information dans la feuille de style et non dans le document HTML, et ce sans duplication de code.

III. Comment essayer rapidement ?

Pour démarrer rapidement avec LESS, vous pouvez utiliser la compilation à la volée au chargement. Cette méthode ne demande aucune configuration et est plus pratique en développement. Voici un exemple :

 
Sélectionnez
<!--  notez l'attribut rel : "stylesheet/less" -->
<link rel="stylesheet/less" type="text/css" href="chemin/vers/le/fichier/less/file.less" />
<!-- Chargement de LESS depuis un CDN, le script doit se trouver après les feuilles de style LESS
    bien sûr, si vous ne souhaitez pas le charger depuis un CDN, vous pouvez le télécharger
    une fois pour toutes et le placer directement sur votre site -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js" type="text/javascript"></script><!--  notez l'attribut rel : "stylesheet/less" -->
<link rel="stylesheet/less" type="text/css" href="chemin/vers/le/fichier/less/file.less" />
<!-- Chargement de LESS depuis un CDN, le script doit se trouver après les feuilles de style LESS
    bien sûr, si vous ne souhaitez pas le charger depuis un CDN, vous pouvez le télécharger
    une fois pour toutes et le placer directement sur votre site -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js" type="text/javascript"></script>

Vous n'avez plus qu'à saisir du code LESS dans la feuille de style.

IV. Utilisation en production

Pour une utilisation en production, il est souhaitable de précompiler le code LESS afin d'obtenir de meilleures performances du chargement des pages. Cependant cette étape peut être repoussée tant que le volume de code LESS reste faible. Il existe plusieurs façons de compiler le code LESS, voici les deux principales :

 
Sélectionnez
<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/less</sourceDirectory>
        <outputDirectory>${project.basedir}/target/generated-css</outputDirectory>
        <compress>false</compress>
        <includes>
            <include>style.less</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin><plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/less</sourceDirectory>
        <outputDirectory>${project.basedir}/target/generated-css</outputDirectory>
        <compress>false</compress>
        <includes>
            <include>style.less</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

V. Conclusion

LESS facilite vraiment la vie lors de l'écriture de feuilles de style et vaut vraiment la peine d'être essayé…

Oh… et en parlant d'essayer, n'importe quel fichier CSS valide est également un fichier LESS valide. La seule chose à faire est donc de le renommer et commencer à utiliser les fonctionnalités apportées par LESS.

VI. Remerciements

Nous tenons à remercier Didier Mouronval et Claude Leloup pour leur relecture attentive de cet article,

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Licence Creative Commons
Le contenu de cet article est rédigé par Samuel Rossille et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.