SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 128 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 – 51 commentaires

18 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 : https://plugins.spip.net/lesspip

Dernière modification de cette page le 15 janvier 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 17 janvier à 16:32, par bruno31 En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Bonjour à tous

    J’ai créé un plugin qui se base sur SPIPr en y ajoutant des fonctionnalités qui me sont propres.

    Le squelette de SPIPr prévoie la possibilité à d’autres plugins de pouvoir injecter du CSS grâce à la balise #INSERT_HEAD_CSS. Pour cela, on doit utiliser le pipeline correspondant pour s’insérer dans le flux.

    Sauf que mon plugin utilise du LESS. Comment injecter du LESS dans le flux ?

    J’ai codé ça :

    function monplugin_insert_head_css($flux)
    {
            $css = find_in_path('css/monplugin.less');
            $flux .= "[<link rel='stylesheet' type='text/css' media='all' href='(#CSS{$css})]' />\n";

            return $flux;
    }

    mais ça sort mal dans le HTML. Le compilateur LESS n’est pas appelé évidemment :

    [<link
    rel='stylesheet' type='text/css' media='all' href='(#CSSplugins/auto/monplugin/css/monplugin.less)]' />

    En fait, il faut compiler le LESS et injecter le CSS résultant.
    Peut-on le faire dans le pipeline ?

    • Le 19 janvier à 16:22, par Mikha En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      j’ai fait un essai : il est inutile de mettre la syntaxe des balises spip : manifestement, quand on cherche à inclure un fichier .less, SPIP cherche automatiquement à le compiler.
      Donc il faut écrire simplement :

      $flux .= "<link rel='stylesheet' type='text/css' media='all' href='.$css.' />\n";
    • Le 21 janvier à 17:25, par bruno31 En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Et bien ça alors ! ça marche !

      Et cela me mets bien le résultat de la compilation dans le flux des css comprimés.

      Gros MERCI Mikha.

    Répondre à ce message

  • Le 8 octobre 2017 à 19:26, par RealET En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Bonjour,

    J’utilise cette syntaxe dans une feuille CSS dynamique qui appelle une feuille less elle aussi dynamique :

    1. [(#PRODUIRE{fond=feuille.less,format=less}
    2.         |appliquer_filtre{less_css}
    3.         |file_get_contents
    4. )]

    Télécharger

    En SPIP 3.1, ça marchait sans problème.

    En SPIP 3.2, même avec une feuille less vide, ça donne :
    LESS : Echec compilation

    ParseError : Unexpected input in anonymous-file-0.less on line 1, column 5 1| local/cache-less/lessdyn-feuille_less-da2c787c.less ?1507482488

    Et le fichier en question n’a que ça ligne 1 :

    1. /* #PRODUIRE{fond=images/stylessoyezcreateurs_perso.less}
    2.    md5:6a58a392d8734677136be268f6089153 */

    Télécharger

    • Le 8 octobre 2017 à 20:05, par RealET En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      J’ai trouvé : il fallait supprimer le timestamp avant de faire le filtre less :

      1. [(#PRODUIRE{fond=feuille.less,format=less}
      2.         |supprimer_timestamp   
      3.         |appliquer_filtre{less_css}
      4.         |file_get_contents
      5. )]

      Télécharger

    Répondre à ce message

  • Le 14 août 2017 à 18:46, par Francky En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

    Hello :-)
    Bon, je ne suis pas sûr qu’il s’agit du bon forum, mais bo...
    php 5.6.30 sur mutu chez ovh
    J’ai un méchant bug, qui plante complètement SPIP 3.2.0-beta3 [23683] :-D

    En faite, au départ, je voulais mettre en route le squelette spipR https://plugins.spip.net/spipr_dist.html mais avec bootstrap3 sass https://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap3_sass/trunk/paquet.xml

    Donc pour ce faire, j’ai télécharger et activer bootstrap3_sass puis, j’ai télécharger et activer spipr
    Le problème, c’est que spipr necessite spip-less
    Si bien que "svp" m’indique :
    Actions demandées :

    • Activer le plugin « SPIPr-dist » (version : 0.4.16)

    Les actions supplémentaires suivantes seront effectuées :

    • Activer le plugin « Z-core » (version : 2.6.3)
    • Activer le plugin « LESS CSS » (version : 1.0.11)
    • Activer le plugin « Comments » (version : 3.4.1)
    • Mise à jour du plugin « Bootstrap 3 - SASS » (de la version 1.0.0 à )
    Alors il y a sans doute un bug de "svp" car il n’est pas logique qu’il s’apprête à faire une mise à jour de bootstrap 3 - sass ( qui n’existe pas sur la zone) mais bon, peu importe, le problème, c’est surtout que après, cela me plante complètement spip en affichant comme message :

    Fatal error : Cannot redeclare balise_CSS() (previously declared in /home/.../auto/scssphp/v1.3.6/scssphp_fonctions.php:232) in /home/.../auto/lesscss/v1.0.11/lesscss_fonctions.php on line 251

    Je me doute que less css et scssphp sont incompatible, mais je pensais pas que spip planterait complètement non plus :-D

    • Le 15 août 2017 à 17:02, par nicod_ En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Effectivement, « Less CSS » et « ScssPhp » utilisent des fonctions qui ont le même nom, donc ça ne peut que planter.
      Il faut que tu supprimes « ScssPhp » par FTP.

    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}
    • Le 10 août 2017 à 14:44, par RealET En réponse à : LESS pour SPIP : Less-CSS (anciennement LESSpip)

      Et comme j’ai eu le besoin d’inclure le résultat dans une autre CSS dynamique, voici la syntaxe :

      1. [(#PRODUIRE{fond=images/feuille.less,format=less}
      2.         |appliquer_filtre{less_css}
      3.         |file_get_contents
      4. )]

      Télécharger

    Répondre à ce message

  • Le 2 décembre 2016 à 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 2016 à 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 2016 à 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 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

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

  • Albums 3

    8 août 2014 – 275 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • ScolaSPIP 4

    19 janvier 2016 – 324 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Newsletters

    16 janvier 2013 – 461 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • Mailsubscribers

    16 janvier 2013 – 396 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • ORR v2

    21 mai 2013 – 101 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)