Une des nombreuses nouvelles fonctionnalités de Joomla! 3 est l'implémentation de LESS. Nombre d'entre vous a bien sur entendu parler de LESS, ce que c'est, comment l'utiliser et comment il peut être utilisé, mais pour ceux désireux de l'apprendre (ou de se rafraichir la mémoire), voici un tour d'horizon de quelques-uns de ses avantages et la façon de l'utiliser dans Joomla.

LESS est une feuille de style dynamique. Pour comprendre LESS, il peut être utile de l'assimiler au langage PHP. De la même façon que PHP est interprété par le serveur puis affichera la correspondance en HTML, LESS est interprété par le serveur et affichera les CSS correspondantes. C'est aussi simple que cela !

Pour être plus précis, LESS étend les CSS grâce à une variété de fonctionnalités supplémentaires. Les trois fonctionnalités abordées dans cet article sont : les variables, les mixins et les fonctions.

Variables

Avec LESS, vous pouvez spécifier un semble de variables qui peuvent être réutilisées tout au long de votre feuille de styles. Nous allons ci-dessous définir trois variables puis démontrer comment elles sont utilisées dans le template.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Une fois que ces variables ont été définies, vous pouvez les réutiliser n'importe où ultérieurement.

a.readon 
{
 color: @secondary;
}

h1
{
color: @primary;
border: 1px solid @bordercolor;
}

Lorsque le code est lu par le serveur, il écrira alors le code CSS, de la même façon que vous avez l'habitude de le voir.

C'est aussi simple. Vous ne voyez peut-être pas dans cet exemple les avantages et le gain de temps, mais dans le cadre d'un template complet comportant des centaines de lignes de code, changer un style devient alors incroyablement simple puisqu'il suffit de modifier une seule variable en haut du fichier.

Mixins

C'est une façon élégante de dire que vous pouvez ajouter des ensembles complets de style à l'intérieur d'un autre style. A certains égards, c'est très similaire aux variables, mais au lieu de n'inclure qu'une seule valeur, nous pouvons inclure un style entier. Voici un exemple de cette technique :

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px) 
{
 border: @width solid @color;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}

Puis, cela pourra être utilisé de la façon suivante :

.moduletable {
 .thinborder(2px,#336699);
}

Comme vous le remarquerez, vous pouvez modifier tout ou aucun des paramètres. Tout paramètre non défini utilisera la valeur par défaut (dans l'exemple ci-dessus, la largeur par défaut de 1px). Encore une fois, c'est un moyen fantastique d'avoir une feuille de style bien gérée sans avoir une énorme quantité de lignes supplémentaires de style. Et encore une fois, en changeant tout simplement le style par défaut, toutes les lignes correspondantes de l'ensemble de la feuille de style seront alors mises à jour.

Fonctions

Les derniers éléments à étudier sont les fonctions pour LESS. Les fonctions LESS sont une façon pour vous d'exécuter des opérations simples sur les variables Nous pouvons utiliser la multiplication, division, addition et soustraction. C'est un moyen très puissant de créer un style unique puis de réutiliser ce style facilement tout au long de la feuille de style, tout en étant capable de manipuler les styles pour des situations uniques. Voici un exemple :

//Definir les variables
@borderwidth : 2px;
@background : #222222;


.moduletable {
 background-color: (@background / 4);
 border: (@borderwidth + 1) solid (@background * 2);
}

En créant ce style et en ajoutant une fonctionnalité LESS à des cas spécifiques, nous pouvons rapidement créer des styles qui sont normalisés dans l'ensemble de la feuille de style, tout en conservant la possibilité d'utiliser si nécessaire des cas singuliers.

Le code ci-dessus montre un cas dans lequel nous avons défini une couleur de fond par défaut puis utiliser cette couleur de fond pour créer autant que variations que nécessaire. Dans cet exemple précis, nous profitons de la couleur de fond pour l'utiliser à la fois, avec variations, comme couleur de bordure et couleur de fond.

LESS peut être utilisé d'autres manières, mais pour ne pas trop allonger cet article, nous n'étudierons pas d'autres exemples, mais nous allons plutôt passer à la façon d'utiliser LESS dans un template Joomla. SI vous avez d'autres questions sur LESS? vous trouverez de plus amples informations sur le site officiel, http://lesscss.org.

Comment LESS est-il mis en oeuvre dans les templates Joomla ?

Joomla! 3 intègre une bibliothèque JUI dans le fichier racine media. Ce dossier contient tous les fichiers LESS du noyau, disponibles pour être utilisés. Les templates Joomla! peuvent ainsi utiliser ces fichiers en les important dans les fichiers LESS spécifiques au template. Voici un exemple de leur importation :

// CSS Reset
@import "../../../media/jui/less/reset.less";

// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";

// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

La liste complète des importations de fichiers disponibles est disponible sur http://kyleledbetter.com/jui/less/

Une fois que vous avez importé les classes LESS de base que vous souhaitez pour votre template et que vous avez ajouté vos propres stytes LESS, vous pouvez ensuite les compiler en un fichier unique template.css pour vérifier votre site en totalité avec un style unifié. Pour compiler vos styles LESS, vous devrez exécuter un compilateur pour générer le fichier CSS. Ne laissez pas la compilation vous effrayer. C'est simplement un terme fantaisiste pour définir le processus d'écriture des fichiers CSS depuis les fichiers LESS (souvenez-vous de toutes ces variables, mixins et fonctions qui doivent être analysées et écrites en CSS classique). Les templates par défaut de Joomla! utilisent une petite application de la plate-forme Joomla! pour générer leurs CSS et le code est disponible pour copie et utilisation dans les styles de votre propre template sur le répertire GitHub du CMS Joomla.

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

Ce fichier contient une fonction doExecute singulière qui, lors de son exécution, va écrire les fichiers CSS en se basant sur une norme de classe Joomla! (JLess). Exécutez-le et générez vos CSS, et voilà, votre toute nouvelle feuille de style pour votre template est prête !

Pour conclure

Ne pensez pas ce processus comme étant trop technique pour être effectivement utilisé. C'est assez simple à comprendre et vous serez surpris par sa simplicité d'utilisation et de mise en oeuvre. Si ce n'est pas déjà fait, commencez dès maintenant à écrire des fichiers LESS. Profitez des mises en forme disponibles dans le dossier racine JUI/LESS et écrivez votre prochain template avec la puissance de LESS.