Pour cet article je ne détaillerais pas les différentes fonctions de Less que vous trouverez sur son site, mais je m’attacherais à expliquer de quelle manière on peut les utiliser et en quoi ce langage va nous faire gagner du temps.

Qu’est ce que Less ?

Less est un langage très similaire au CSS, on pourrait dire que c’est du CSS amélioré. Si vous connaissez le CSS, vous n’aurez donc aucun problème à aborder Less.

Comment utilise-t-on Less ?

Les fichiers Less sont pratiquement identiques aux fichiers CSS, cependant ils ne peuvent être lus par votre navigateur. Il faut donc les transformer en CSS. Pour cela il y a plusieurs façons de faire. Soit à la volée avec un script Javascript qui s’occupera de faire la conversion à chaque fois que vos pages sont affichées (ça fonctionne plutôt bien), soit coté serveur (mais là il faut pouvoir installer des scripts et donc avoir un serveur dédié et s’y connaitre un peu), ou alors la méthode que j’utilise, grâce un petit programme installé sur votre ordinateur. Avec cette dernière méthode, à chaque fois que vous enregistrerez votre fichier .less, un fichier .css sera également enregistré.
Voici deux liens vers ces logiciels :

Comment intégrer Less à un projet ?

Pour intégrer ce nouvel outil à un projet, c’est très simple. Comme je l’ai indiqué au début, LESS est du CSS amélioré. Il vous suffit donc de renommer votre fichier .css en .less. Bravo, vous venez de créer votre premier fichier LESS. Il ne vous reste plus qu’à le modifier pour tirer pleinement partie des fonctionnalités offertes par LESS.

Les variables, mais comment faisait-on avant ?

La fonctionnalité qui me semble la plus fondamentale dans LESS est la possibilité de créer des variables.

@maVaribale : #FFFFFF

Pour créer une variable il suffit d’écrire son nom précédé de « @ », puis, comme en CSS, il suffit de la définir après les « : ». Les variables ne sont pas obligatoirement des couleurs, vous pouvez y stocker ce que vous voulez. Par exemple, si vous utilisez les grilles, vous pouvez y stocker une largeur de colonne. On peut également créer une variable pour les style d’animation CSS3 (« ease », « cubic »,…)

Les fonctions (ou mixin)

La principale utilité que je trouve aux fonctions est le gain de place et de lisibilité :

.maFonction(@arguments){propriété:valeur}

Une fonction s’écrit comme la règle d’une class avec les arguments (ou paramètres) en plus.

Comment va-t-on gagner de la place avec les fonctions ? En les utilisant essentiellement pour les propriétés CSS3 qui nécessitent plusieurs propriétés pour chaque navigateur.
Par exemple la propriété transition :

.transition(@property:all,@duration:500ms,@style:ease){
    -webkit-transition: @property @duration @style;
    -moz-transition: @property @duration @style;
    -o-transition: @property @duration @style;
    transition: @property @duration @style;
}

On définit entre les parenthèses les paramètres avec si besoin une valeur par défaut.

Pour l’utiliser, c’est très simple :

a{
    .transition();
}

ou

a{
    .transition(all, 1000);
}

Dans le premier cas, la transition utilisera toutes les valeurs des arguments par défaut, dans le second, seule l’argument @style utilisera la propriété par défaut.

Regardons une seconde propriété CSS3 très utilisée : border-radius.

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

J’ai donc créé une fonction .rounded-corners avec comme argument @radius ayant pour  valeur par défaut 5px. Il y a un second argument : « … » (trois points) qui permet de rajouter des arguments facultatifs. Dans la fonction, on utilise une variable générale @arguments (à ne pas confondre avec une variable globale comme en PHP par exemple) qui regroupe tous les arguments passés en paramètre.

div{
    .rounded-corners();
}

Dans l’exemple ci-dessus notre div aura ses 4 coins arrondis de 5px.

div{
    .rounded-corners(10px);
}

Dans l’exemple ci-dessus notre div aura ses 4 coins arrondis de 10px.

div{
    .rounded-corners(5px,10px );
}

Dans l’exemple ci-dessus notre div aura 2 coins arrondis de 5px et 2 autres de 10px.

Sans les « … », notre fonction n’aurait accepté qu’un seul argument, nous aurions été contraints d’avoir les 4 coins toujours identiques. Grâce aux arguments optionnels, nous pouvons au besoin définir l’arrondi de chacun des 4 coins.

Il y a d’autres subtilités pour les fonctions que je vous laisse découvrir sur le site de LESS ainsi que des fonctions pré-enregistrées comme lighten() ou fade() qui transforment les couleurs.

Les règles imbriquées

Autre nouveauté appréciable, l’écriture des règles par imbrication. Au lieu d’écrite ceci :

div a span{
    color : #FF0000;
}

On peut à présent écrire :

div{
    a{
        span{
            color : #FF0000;
        }
    }
}

Plus complexe, au lieu de :

div{
    padding : 10px;
}
div a{
    font-size : 1.2em;
}
div a:hover{
    text-decoration : underline;
}
div a span{
    color : #FF0000;
}

On aura :

div{
    padding : 10px;
    a{
        font-size : 1.2em;
        &:hover{
            text-decoration : underline;
        }
        span{
            color : #FF0000;
        }
    }
}

Si dans cet exemple on ne gagne pas forcément de place, en revanche on gagne de la lisibilité. Le « & » désigne le parent de la règle dans laquelle il se trouve.

Attention toutefois à ne pas trop en abuser car vous vous retrouveriez parfois avec des règles trop exclusives.

Les opérateurs

Pour finir, un petit plus, les opérateurs. Vous pouvez effectuer des opérations dans votre feuille de style. Par exemple si vous vous êtes adeptes de la grille et que vous avez paramétré une variable pour la largeur de vos colonnes, il devient très simple de définir les largeurs des différents éléments, ici une div de class « large » :

@colonne : 220px;
.largeurColonne(@n){
    width : @n * @colonne;
}
div.large{
    .largeurColonne(3);
}

Ce qui nous donnera en CSS :

div.large{width:660px;}

Conclusion

Voilà, j’espère vous avoir convaincu de l’utilité d’utiliser LESS. Non seulement, vous gagner un peu de place, vous avez une meilleure lisibilité du code, mais surtout vous avez une maintenabilité très largement accrue.

Client : « Finalement je voudrais un bleu un peu plus pâle ».

@monBleu : #1789f3;

devient :

@monBleu : lighten(#1789f3,20%);

Voici un lien vers un article qui vous proposera un exemple utilisant LESS.

N’hésitez pas à faire des remarques, apporter des corrections ou à poser des questions.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *