Introduction à LESS

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

@themeColor: #6dd;
@themeBackground: #cfe;@themeColor: #6dd;
@themeBackground: #cfe;

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

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 :

@space: @10px;
@tinySpace: @2px;@space: @10px;
@tinySpace: @2px;

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

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

… et même d'autres variables :

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

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

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

ou ceci :

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.

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 :

#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 :

#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.

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 :

.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.