LESS est une des briques qu’il manquait à CSS. Ce meta-langage apporte des fonctionnalités jusque là inédites telles que l’héritage, l’injection et les variables. lessphp porte ces avancées en PHP et ajoute ses propres fonctionnalités.
Cet outil me paraît indispensable alors j’ai décidé de l’intégrer à WordPress : WP-LESS est né.
LESS en quelques mots (ou lignes de code)
Pour mettre en exergue l’intérêt de LESS, je reprends un exemple officiel :
#defaults {
@width: 960px;
@color: black;
}
.article { color: #294366; }
.comment {
width: #defaults[@width];
color: .article['color'];
}Le source précédent utilise 3 principes :
- les variables (dont leur nom est préfixé par un @)
- les namespaces (ici, #defaults) pour regrouper des propriétés
- les accesseurs (pour obtenir la couleur de l’article au sein du commentaire)
Une fois ce code compilé par LESS, la feuille de style générée se résume à ceci :
.article { color:#294366; }
.comment {
width:960px;
color:#294366;
}C’est simple et efficace. Surtout quand on sait que l’on peut effectuer des opérations mathématiques, y compris en utilisant les variables, la conception va se retrouver facilitée.
L’intérêt de WP-LESS
WP-LESS intègre le parseur PHP, phpless, au sein de WordPress pour minimiser le travail à fournir.
Une fois activé, dès qu’il détecte un fichier comportant l’extension .less, il compilera automatiquement le fichier pour produire des CSS interprétables par les navigateurs Web. Pour des raisons de performances, cette compilation n’est effectuée que lorsque le fichier .less est modifié. Cela implique également qu’à chaque mise à jour de votre fichier .less, vous n’avez pas à vous soucier de compiler son équivalent CSS.
De nombreux hooks et filtres sont placées un peu partout dans le code pour permettre à tout développeur, créateur de thème ou bidouilleur de se fixer dessus sans avoir à modifier le code du plugin. Et dans les rares cas où ça ne suffirait pas, tout est extensible puisqu’il suffit d’hériter de l’objet WPLessPlugin pour parvenir à vos fins.
Des tas de choses qu’on ne pourrait pas faire en simple PHP4 (message subliminal : WordPress doit abandonner PHP4).
WP-LESS agit en toute transparence et simplicité.
Quel avenir pour WP-LESS ?
J’ai déjà en tête d’autres fonctions pour simplifier encore plus la vie :
- permettre l’intégration dans un thème en tant que dépendance externe pour permettre aux thémeurs de redistribuer WP-LESS sans avoir à activer le plugin
- proposer des helpers pour ne pas avoir à passer par wp_enqueue_stylesheet (même si c’est la meilleure solution)
- dissocier les fichiers
.lessdes feuilles de style dans l’éditeur de thème avec une validation lors de l’enregistrement - afficher un tableau de bord montrant l’état des fichiers de cache tout en pouvant les purger
Vous attendriez d’autres fonctionnalités de la part de ce plugin ?
Si jamais ça ne va pas (contenu pas adapté ou autre), n’hésite pas à me le signaler...
Commentaires & rétroliens
J’avoue que je découvre l’existence de cette surcouche CSS, il est vrai qu’il m’est déjà arrivé sur certains projets complexes d’avoir envie d’effectuer des calculs à l’intérieur de mes feuilles de styles. Bonne initiative ce plugin, merci !
Plutôt une bonne découverte ! Merci
Bonjour,
j’ai essayé d’utiliser wp-less sur wordpress mu et ça ne fonctionne pas. Visiblement le problème vient de la localisation des fichiers CSS générés. Le fait qu’il se trouvent dans le répertoire des fichiers d’upload fait, sous wpmu, que les fichiers sont proposés en téléchargement et pas servis comme des ressources normales (c’est défini dans le .htaccess).
Le CSS généré est ok, mais il n’est pas du tout pris en compte par le navigateur.
Des idées sur comment fixer le problème ?
Bonjour,
pour ceux qui souhaiteraient utiliser wp-less dans leur thème sur une plateforme WordPress mu, il semble que la modification des lignes suivantes corrige le problème (je n’ai pas cherché plus loin, j’avais besoin d’un hack rapide) :
Fichier lib/Plugin.class.php, lignes 123 et 124 :
WPLessStylesheet::$upload_dir = $this->configuration->getUploadDir();
WPLessStylesheet::$upload_uri = $this->configuration->getUploadUrl();
remplacées par :
WPLessStylesheet::$upload_dir = get_stylesheet_directory().’/wp-less-cache’;
WPLessStylesheet::$upload_uri = get_bloginfo(‘stylesheet_directory’).’/wp-less-cache’;
J’ai décidé ici de sauvegarder mes feuilles de styles générées dans un répertoire wp-less-cache sous le répertoire de mon thème, mais c’est très facilement modifiable / paramétrable.
Mouais, le problème vient surtout que tout fichier dans le répertoire `uploads` est considéré comme téléchargeable (ce qui n’est pas vrai).
Je n’aime pas écrire dans le répertoire du thème car, sauf s’il le spécifie − le thème, il n’a pas à écrire de fichiers sur le système.
Ceci dit, y’aurait moyen de faire en sorte que ça soit modifiable sans pour autant hacker le plugin, en passant par le hook `wp-less_wpless_wpmu_configuration` (les attributs statiques sont protégés donc non-modifiables depuis l’extérieur).
Faudrait juste ajouter des méthodes publiques pour ça.
Less semble très sympa, mais par rapport à des méthodes comme celles explicitées ici : http://css4design.com/feuille-de-style-css-dynamique-avec-php
qu’est-ce que ça apporte ? (je pose la question pour pouvoir faire un choix )
merci
Less va au-delà, en proposant une syntaxe découplée d’un langage de programmation : on étend CSS par le biais de nouvelles possibilités de syntaxe.
PHP est bien là (pour lessphp tout du moins), mais on n’en a que faire.
ah c’est une vraie syntaxe à part entière ? Elle n’utilise pas du tout php (en dehors du contexte de plugin) ?
LESS c’est une syntaxe CSS améliorée, qui sera ensuite parsée pour générer du CSS intelligible par un navigateur Web.
C’est pour ça qu’on parle de compilateur, car au final, on en revient à ce qu’on connaît … mais avec des raccourcis et de la génération simplifiée.
Cf. http://leafo.net/lessphp/docs/
Répondre