LESS pour SPIP : Less-CSS (anciennement LESSpip)

Publié le : 5 novembre 2010 – Dernière modification le 21 décembre 2021 – par jeanbaptiste_bourgoin – 57 commentaires

1
2
3
4
5
23 votes

Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP.

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.

Il utilise le compilateur LESS pour PHP LessPhp

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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

22 discussions

  • Fennec72

    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

  • 1
    Théo

    Bonjour,

    Ce plugin nécesaire pour installé Sark-4 me donne ce message :

    Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/css/button-groups.less) is not within the allowed path(s): (/mnt/112/sdb/b/f/lionelvend) in /mnt/112/sdb/b/f/monsite/plugins/auto/less-css/less.php/Less.php on line 5845

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 76 bytes) in /mnt/112/sdb/b/f/monsite/plugins/auto/less-css/less.php/Less.php on line 6177

    Dans le .htaccess j’ai mis :

    <ifDefine Free>
PHP 5
</ifDefine>
SetEnv PHP_VER 5

    Je ne sais pas que faire. En local, cela fonctionne. Est-ce un blocage de Free ?

    • Christian Marget

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

      if (strlen(rtrim($rootpath,'/\\')) == 0){
	$path = ltrim($evald_path,'/\\');
}else{
	$path = rtrim($rootpath,'/\\').'/'.ltrim($evald_path,'/\\');
}

      En attendant que cette modif soit reportée sur la version en téléchargement...

    Répondre à ce message

  • 1
    pipol

    Le plugin sera t’il compatible spip 3.1 ?

    • Francky

      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

  • 11
    Mist. GraphX

    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.

    @++

    • triton

      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

    • Mist. GraphX

      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

    • triton

      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

    • Mist. GraphX

      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.

       ;-)

    • Cerdic

      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 !

    • triton

      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

    • Mist. GraphX

      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 ,

    • Cerdic

      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 )

    • triton

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

    • Mist. GraphX

       ;-) 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

    • triton

      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

  • Mist. GraphX

    oui, Cédric a dit dans son post précédent :

    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.

    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

  • triton

    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

  • Mist. GraphX

    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

  • 3
    casp

    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 ?

    • casp

      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.

    • casp

      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

  • JL

    spiplesscss a une version SPIP3 qui n’est pas taggée sur plugins.spip.net : à corriger ?

    Répondre à ce message

  • 2
    Valéry

    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

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom