SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 285 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > LESS-CSS > LESS pour SPIP : Less-CSS (anciennement LESSpip)

LESS pour SPIP : Less-CSS (anciennement LESSpip)

5 novembre 2010 – par jeanbaptiste_bourgoin – 43 commentaires

17 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 :

  1. @brand_color: #4D926F;
  2.  
  3. #header {
  4. color: @brand_color;
  5. }
  6.  
  7. h2 {
  8. color: @brand_color;
  9. }

Télécharger

Mixins

  1. .rounded_corners (@radius: 5px) {
  2. -moz-border-radius: @radius;
  3. -webkit-border-radius: @radius;
  4. border-radius: @radius;
  5. }
  6.  
  7. #header {
  8. .rounded_corners;
  9. }
  10.  
  11. #footer {
  12. .rounded_corners(10px);
  13. }

Télécharger

Nested rules :

  1. #header {
  2. color: red;
  3. a {
  4. font-weight: bold;
  5. text-decoration: none;
  6. }
  7. }

Télécharger

Operations

  1. @the-border: 1px;
  2. @base-color: #111;
  3.  
  4. #header {
  5. color: @base-color * 3;
  6. border-left: @the-border;
  7. border-right: @the-border * 2;
  8. }
  9.  
  10. #footer {
  11. color: (@base-color + #111) * 1.5;
  12. }

Télécharger

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.

Voir en ligne : http://plugins.spip.net/lesspip

Dernière modification de cette page le 6 septembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 2 décembre à 12:06, par Yohooo En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Hello,

    Pas de soucis de message d’erreur de mon coté, mais un très long temps de calcul à chaque modification des feuilles de style due aux nombreux css imbriqués.

    évidement, cela ne se produit que lorsque la variable var_mode=recalcul est passée. Mais c’est très handicapant pendant les périodes de développement.

    Quelqu’un a t’il des bonnes pratiques pour éviter ces temps de latence ? Peut-être une modification de la config du serveur pour accélérer les calculs ?

    Répondre à ce message

  • Le 7 novembre 2015 à 23:15, par Xoclaf En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Bonjour,
    J’essaye d’installer SPIPr sur le site de mon établissement.
    Cependant, le menu de navigation ne s’affiche pas, et j’ai le message d’erreur suivant :

    Warning : Missing argument 1 for lesscss_select_css(), called in /web/l/e/lyc-rolland-goussainville/http/tmp/cache/skel/html_c5ebbd0ba795fd9c392eb1a859072bf5.php on line 182 and defined in /web/l/e/lyc-rolland-goussainville/http/plugins/auto/lesscss/v1.0.5/lesscss_fonctions.php on line 245

    La ligne 245 du fichier lesscss_fonctions.php correspond à :

    1. function lesscss_select_css($css_file){

    Je copie également le paragraphe avec les quelques lignes au-dessus et en dessous :

    1. /**
    2.  * Selectionner de preference la feuille .less (en la compilant)
    3.  * et sinon garder la .css classiquement
    4.  *
    5.  * @param string $css_file
    6.  * @return string
    7.  */
    8. function lesscss_select_css($css_file){
    9. if (function_exists('less_css')
    10. AND substr($css_file,-4)==".css"){
    11. $less_file = substr($css_file,0,-4).".less";
    12. $less_or_css = lesscss_find_less_or_css_in_path($less_file, $css_file);
    13. if (substr($less_or_css,-5)==".less")
    14. return less_css($less_or_css);
    15. else
    16. return $less_or_css;
    17. }
    18. return find_in_path($css_file);
    19. }

    Télécharger

    Quelqu’un aurait-il la solution à ce problème ?
    Merci par avance.

    • Le 21 janvier à 21:38, par fred02840 En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Alors ? SPIPr a-t-il pu être installé ? Car je bloque sur le même problème…

    • Le 22 janvier à 10:57, par Xoclaf En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Bonjour,
      Oui le problème est résolu, j’avais posté la réponse sur le forum mais je n’avais plus pensé à le faire ici...
      Pour résoudre le problème j’avais fait deux modifications :

      • j’avais effacé le cache du site ;
      • j’avais vidé le dossier squelettes situé à la racine.

      Je crois que c’est surtout la seconde solution qui avait été décisive.

    Répondre à ce message

  • Le 26 juillet 2015 à 19:03, par pipol En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    J’ai mis à jour un site de spip 3.0.17 en 3.0.20 et au passage j’ai aussi mis à jour less-css qui était en 0.7.11 avec la dernière version.
    Cependant mon site bug et je me retrouve avec un message d’erreur sur le site public :

    Warning : Missing argument 2 for Less_Functions::lighten() in /home/casptdkw/www/plugins/auto/less-css/less.php/Less.php on line 3166

    Fatal error : Call to undefined method Less_Tree_Expression::toHSL() in /home/casptdkw/www/plugins/auto/less-css/less.php/Less.php on line 3167

    J’ai été obligé de revenir en 0.7.11 pour faire fonctionner à nouveau mon site.
    Une idée de comment corriger le problème ?

    • Le 27 août 2015 à 17:29, par Valéry En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Soucis similaire : site fonctionne avec 0.7.11 m’ais l’update en 1.0.5 ssuscite des erreurs de compilation de LESS.

    • Le 27 août 2015 à 17:43, par Valéry En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Il semble que dans mon cas la nouvelle version soit simplement moins tolérante envers les erreurs de syntaxe (variables manquantes, etc.)

    • Le 8 novembre 2015 à 16:50, par Casp En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Et quels étaient tes erreurs ? car pour moi impossible de trouver d’ou viens le problème.

      Autant si je fais une faute de syntaxe, alors mon site apparait avec un erreur SPIP de compilation.
      Mis dès que je n’ai plus d’erreur pour moi ; le site n’apparaît plus et j’ai à la place ces messages d’erreurs :(

    • Le 8 novembre 2015 à 17:17, par Casp En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Ok trouvé, il n’aimait pas les double opérations.
      Style : lighten(saturate(@lien,30%)10% ;

    Répondre à ce message

  • Le 13 août 2015 à 14:21, par Fennec72 En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    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

  • Le 13 mai 2015 à 16:59, par Théo En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    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 ?

    • Le 17 juin 2015 à 02:28, par Christian Marget En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

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

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

      Télécharger

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

    Répondre à ce message

  • Le 10 juillet 2014 à 13:13, par Ludo En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    J’aurais aimé utiliser des variables de configuration de spip dans mes fichiers less mais il ne me semble pas que cela fonctionne. Quelqu’un a t-il une idée de comment faire ?
    par exemple j’aurais aimé pouvoir configurer certaines couleurs directement sur spip par un plugin.
    Merci pour votre aide

    • Le 16 mars 2015 à 20:00, par tcharlss En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Bonjour, tombant juste sur ton message, une réponse très tardive qui peut servir à d’autres : oui c’est possible.

      Imaginons dans le dossier de squelettes un fichier styles.less où tu voudrais placer des balises SPIP.
      Il faut le renommer en styles.css.html, et ajouter ces 2 lignes au tout début :

      1. #HTTP_HEADER{Content-Type: text/css; charset=utf-8}
      2. #HTTP_HEADER{Vary: Accept-Encoding}

      Télécharger

      Ensuite, il faut référencer la feuille de style au moyen de la balise #PRODUIRE et appliquer le filtre less_css :

      1. [<link rel="stylesheet" href="(#PRODUIRE{fond=styles.css}|less_css)" type="text/css" />]
    • Le 16 mars 2015 à 20:23, par tcharlss En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Ah, et si au lieu de xxx.css.html on veut nommer ses fichiers xxx.less.html (plus logique), il faut ajouter l’option format=less à la balise #PRODUIRE :

      1. #PRODUIRE{fond=xxx.less, format=less}

    Répondre à ce message

  • Le 13 janvier 2015 à 18:34, par pipol En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Le plugin sera t’il compatible spip 3.1 ?

    Répondre à ce message

  • Le 26 février 2014 à 11:38, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    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.

    @++

    • Le 8 mars 2014 à 13:22, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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

    • Le 8 mars 2014 à 17:51, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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

    • Le 8 mars 2014 à 22:47, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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

    • Le 9 mars 2014 à 08:14, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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.

       ;-)

    • Le 9 mars 2014 à 13:03, par Cerdic En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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 !

    • Le 10 mars 2014 à 10:02, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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

    • Le 10 mars 2014 à 10:22, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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 ,

    • Le 10 mars 2014 à 11:00, par Cerdic En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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 )

    • Le 11 mars 2014 à 08:48, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

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

    • Le 11 mars 2014 à 12:00, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

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

    • Le 21 mars 2014 à 11:56, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      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

  • Le 11 mars 2014 à 08:20, par Mist. GraphX En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    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

  • Le 10 mars 2014 à 21:08, par triton En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • GIS 4

    11 août 2012 – 1288 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)