Utilisation du plugin
Ce plugin compile à la volée tous les fichiers .less.css ou .less du squelette qui contient #INSERT_HEAD. Vous pouvez aussi forcer la compilation d’un fichier ou d’une feuille de style calculée à l’aide du filtre |less_css.
Les fichiers générés sont mis en cache dans /local/cache-less
Le langage LESS
LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de feuilles de style complexes.
La documentation officielle (http://lesscss.org) offre de bons exemples de ce qu’il est possible de faire avec LESS :
Variables :
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
Mixins
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
Nested rules :
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Operations
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}
La balise #CSS
Le plugin introduit une nouvelle balise #CSS
qui cherche les fichiers .css ou .less du même nom pour les compiler en fichier .css statique.
Exemple d’utilisation
[<link rel="stylesheet" href="(#CSS{css/style.css})" type="text/css" />]
La balise va chercher un fichier css/style.less ou css/style.css ou css/style.css.html pour retourner un fichier css classique interprétable.
Depuis la version 1.2.3 du plugin (Octobre 2018), le plugin permet d’activer une nouvelle valeur css
pour forcer le recalcul des squelettes CSS,
en affichant un bouton d’administration supplémentaire pour &var_mode=css
.
Discussions par date d’activité
22 discussions
Bonjour,
Je débute en LESS.
Doit-on passer toutes les feuilles de style de la dist en .less ou peut-on se contenter de créer une perso.less appellée dans l’inclure/head.html par :
[<link rel="stylesheet" href="(#CSS{css/perso.css})" type="text/css" />]
Si je ne me trompe pas, j’aurais donc dans squelettes/css/
layout.css, style.css, typo.css, etc. et perso.less
Est-ce bien cela ?
Merci d’avance.
Répondre à ce message
Bonjour,
Ce plugin nécesaire pour installé Sark-4 me donne ce message :
Dans le .htaccess j’ai mis :
Je ne sais pas que faire. En local, cela fonctionne. Est-ce un blocage de Free ?
Pareil pour moi, en voulant installer SPIPr.
Correctif : dans le fichier plugins/auto/less-css/less.php/Less.php, la ligne fautive est celle qui calcule $path (ligne 5843 pour la version 1.0.5) car elle renvoie un chemin absolu dans le cas où $rootpath est vide. Il faut la remplacer par ce bloc (j’ai enlevé les indentations pour la lisibilité).
En attendant que cette modif soit reportée sur la version en téléchargement...
Répondre à ce message
Le plugin sera t’il compatible spip 3.1 ?
Bonjour, une version fonctionnant sous spip 3.1 est déjà « dite » fonctionnelle dans le dossier « trunk »
http://zone.spip.org/trac/spip-zone/browser/_plugins_/less-css
Actuellement, il n’y a pas de zip dispo pour cette version car les auteurs, n’ont sans doute pas le désir de la sortir trop tôt, avant qu’elle soit pleinement fonctionnel.
C’est donc juste une histoire de temps :-)
Répondre à ce message
Pour info une nouvelle version de less php qui est maintenu et a jour est disponible (l’auteur de la première lib ayant abandonné le support au profit de scss) :
http://lessphp.gpeasy.com/
Cette version permet donc de compiler Bootstrap 3 pour ceux que ça interresserait.
depuis peut ça comprend une passerelle avec l’ancienne version de leafo, et donc la transition est sans douleur.on peut de plus aussi injecter les variables via un array comme la lib précédente.
@++
Bonjour,
Je confirme que cette version du plugin ne compile pas les less de bootstrap 3, du coup j’ ai remplacé lessc.inc.php par la derniere version téléchargée sur le lien ci dessus, mais cela ne me permet toujours pas de compiler les less de bootstrap 3... Je n ai même pas de log, juste le fichier source html qui est s’arrête juste avant l appel des css... Y a autre chose a faire ?
Merci bien
triton
Oui en fait y’a un problème de path pour les inclusions des @import avec cette version de lessPhp quand on utilise le plugin bootstrap et spip-r
Bonsoir,
merci pour la reponse !
Y a t il un contournement si on veut utiliser la compilation less et bootstrap 3 ?
J ai jeté un oeil sur le code de less.inc.php mais la comme ca, ca me semble pas mal obscur....
Cordialement
triton
Oui, ne pas compiler via la BALISE #CSS et la fonction actuelle less_compile , en utilisant la class LESS normalement comme dans tout programme php.
En utilisant Koala ou une appli du genre pour compiler a coté. ou grunt, ou less.js ...
En passant a Scss, bootsrap a une version Scss
En arrêtant d’utiliser bootstrap tout simplement... en passant a Compass ;-) bref y’a plein de solutions.
;-)
Je suis en train de regarder le passage à la librairie http://lessphp.gpeasy.com/
La question du path se règle assez facilement, il reste quelques petits détails à fixer, mais j’ai bon espoir !
Bonjour,
merci pour ces réponses précises et circonstanciées ! Je suis en train de tester les différents framework css que je connais très mal, ainsi que less que je ne connais que de loin. Jusqu à présent pour faire des css dynamiques, j utilisai... SPIP. Genre pour récupérer les logos des objets éditoriaux comme background-image, des mots clés pour générer des class, des variables #GET... et je me dis donc que ça serait quand bien chouette de pouvoir faire des boucles spip dans des fichiers pre-less avant d etre compilés, non ?
cordialement
triton
On peut injecter des variables ou du less, directement depuis php (avec les deux versions du portage), personnellement j’utilise un pipeline pour injecter les variables depuis un/des plugins, et ça fonctionne plutôt bien pour gérer tout ce qui est configuration des variables (hauteur du header, layout, line-height, ...). Je n’ai pas eut le besoin dans mon cas, d’utiliser du langage spip dans un less.
@cedric : La question du path se règle assez facilement, ...
^^ heu ... ça n’as pas été ma première impression ,
J’ai mis la nouvelle version du plugin en chantier sur http://zone.spip.org/trac/spip-zone/browser/_plugins_/less-css/trunk
Ce n’est pas encore utilisable avec le plugin BootStrap pour SPIP car j’y ai commis quelques petites erreurs syntaxiques qui étaient tolérées par l’ancien compilateur - à tord. Je vais les corriger prochainement, une fois vérifié les non regressions etc.
Mais en attendant vous pouvez déja tester si ça compile bien BootStrap 3 par exemple.
(Cf les notes de commit http://zone.spip.org/trac/spip-zone/changeset/81278/_plugins_/less-css/trunk )
Arch ! comme une patate j’ai posté mon message dans le mauvais fil, du coup pas de notification pour les 2 qui suivent.... Donc, y a le résultat de mes tests juste au dessus... désolé....
;-) moi aussi du coup, j’ai répondu en dessous.
Bon je fais un retour : ça marche donc très bien chez moi sur un spip de test 3.0.15, ça compile bootstrap 3. Avec juste le nouveau plugin less-css
- creer un dossier /squelettes et y copier les fichier de la dist (au moins sommaire.html et /inclure)
- dans un dossier /css déposer les fichiers less de bootstrap
- mettre les chemins corrects dans bootstrap @import ’css/....
- dans incure/head , on ajoute
[<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
vidage de /local et /tmp (pas obligé mais, ayant désactivé tout les plugins pour le test je l’ai fait ^^)
Niveau ressources : j’ai trouvé le temps de compilation assez rapide par rapport a la version précédente, certainement quand y’a beaucoup de surcharges ça doit jouer.
Merci Cedric pour cette mise à jour
Bonjour,
ca y est j’ai eu le temps de tester, et bien ça marche nickel !
Je m étais juste bien pris les pieds dans les surcharges...
Par contre je m’interroge vraiment sur l’intérêt de bootstrap, en particulier sur la totale incompatibilité entre la version 2 et 3 de bootstrap... c est un peu inquiétant cette absence de compatibilité ascendante ?
Un grand merci pour le boulot
triton
Répondre à ce message
oui, Cédric a dit dans son post précédent :
Donc ça me parait normal que ça ne marche pas ;-)
2/ ce que tu cite est la librairie qui à été intégré par cedric
3/ je l’utilise et je te garantie que ça compile bootsrap 3, comme cédric l’as expliqué le problème viens des surcharges faites dans les mixins de spip-r. Donc essaye sans Spip-r en mettant bootstrap dans ton dossier squelette ...
Répondre à ce message
Bonsoir,
j ai essayé de tester tout ca...
Avec la dernière version bootstrap3.1, j’ai remis en place les chemin d acces des imports, la structure des dossiers... et j ai 2 erreurs de compil qui empeche d aller plus loin :
1 LESS : Echec compilation fichier ..../bootstrap.less variable @grid-columns is undefined in mixins.less in grid.less
2 LESS : Echec compilation fichier..../spipr_dist.less variable @emLineHeight is undefined
Si j essaye de compiler en ligne mixins.less sur http://lessphp.gpeasy.com/Demo cela ne fonctionne pas, pas de msg d erreur non plus...
Le probleme c est que je ne suis vraiment pas très familier avec cet environnement et que j’ai du mal a debuguer... j’ai quand même l impression pour avoir lu pas mal de forum sur ce point, que c est le compileur utilisé qui ne gere pas les nouvelles fonctionnalités, et qu’il semble être abandonné au profit de https://github.com/oyejorge/less.php
Y a une discussion sur le sujet ici :
(https://github.com/kriswallsmith/assetic/issues/557)
mais alors vraiment tout ca sous toutes reserves, pour l instant, tout cela reste assez opaque pour moi....
triton
Répondre à ce message
Bonjour,
Ne serait il pas judicieu que le plugin less déclare une pipeline utilisable par les autres plugins ou squelettes.
la fonction qui compile actuellement ne prend pas de paramètres comme des variables par exemple, pour mon utilisation sur un squelette perso, j’ai modifié ceci et ça me permet d’injecter toutes les variables via un array() en php, ce qui est je pense beaucoup plus efficace que les feuilles style.css.html.
bref, une idée comme ça ...
Répondre à ce message
Bonjour, je ne parviens pas à utiliser @import.
j’ai un fichier styles.less
avec dedans des @import pour mes différentes bout de feuille de styles (variable, reset, layout, print etc..). Afin de tout compiler.
j’ai beau essayer de mettre
@import : « variables.less »
@import : (less) « variable.css »
@import : « variable.less.css »
Rien n’y fait il n’importe pas la feuille de style .. Une idée du pourquoi ?
Tu as un exemple ici : http://zone.spip.org/trac/spip-zone/browser/_themes_/spipr/v1/beige/css/theme.less
Merci .. C’est pourtant ce que je faisais, mais cela ne fonctionne pas.
Il se peut que cela soit lié au fait que je soit en local ?
Peut être les @import de marche pas dans ce cas là.
C’est quand même étrange, car lorsqu’ il s’agit simplement de compiler seul fichier style.less.css le plugin y arrive même en local. Quand au @import url() classique eux aussi marche très bien si je fais des fichier .css simplement.
Le problème est résolu.
Il y avais une variable non définis dans un des fichiers.
(j’ai utilisé directement l’application LESS pour voir et elle m’a indiqué mon erreur.
Répondre à ce message
spiplesscss a une version SPIP3 qui n’est pas taggée sur plugins.spip.net : à corriger ?
Répondre à ce message
Bonsoir,
En utilisant ce plugin j’ai le message :
Warning : Wrong parameter count for clearstatcache() in /***/plugins/auto/less-css/lesscss_fonctions.php on line 114
Sauriez-vous d’où une telle alerte peut provenir svp ?
Valéry
C’est un bug avec PHP 5.2, corrigé en version 0.7.4 ! Merci du signalement.
Merci pour le correctif.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |