LESS pour SPIP : Less-CSS (anciennement LESSpip)

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

  1. [<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.

Dernière modification de cette page le 2 mars 2019

Discussion

20 discussions

  • 1

    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

  • 11

    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 :

    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

  • 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

  • 3

    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 ?

    • 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

  • 2

    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

  • 1

    Si si ! Mais je pensais qu’il s’agissait d’un tag « égal et supérieur » à 2.0.

    • et bien non ! la raison est simple : il peut y avoir des plugins compatibles 2.0 qui ne le sont pas 2.1 (même si en général c’est plus entre 1.9 et 2.0 que ce se joue)

      bizes

    Répondre à ce message

  • tiens par contre, c’est pas compatible 2. 1 ?

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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