Less et Bootstrap : opérations impossibles côté client ?

Bonsoir,

N'ayant trouvé ni sujet ni forum consacrés à Less, je viens donc vous importuner ici à propos de ce langage dynamique des CSS.

Je souhaite l'utiliser pour modifier le framework de Bootstrap Twitter. Je l'ai donc installé sur mon serveur via FTP car impossible de faire tourner le less.js en local. Sur le serveur, donc, pas de souci, le template de base de Bootstrap s'affiche correctement, comme si j'avais dans le head du HTML le lien pointant vers le fichier CSS.

Par contre, dès que je souhaite effectuer une modif' via un fichier LESS comme, par exemple, transformer la couleur de tous les liens dans le fichier variables.less, rien ne se produit, rien ne se passe : le fichier LESS est modifié mais aucune conséquence à l'actualisation de la page web.

Je précise que j'ai téléchargé le less.js et qu'il ne s'agit pas d'opération côté serveur.

J'ai suivi un tuto sur l'utilisation du framework Bootstrap où toute à la fin il est question de LESS, à savoir comment on l'installe côté client et comment se réalise une opération basique de changement de couleur ; j'ai fouillé également github et stackoverflow pour savoir si quelque chose m'échappait ; j'ai vérifié s'il y avait une quelconque erreur dans la console JS.

Mais je n'y comprends toujours rien : impossible d'appliquer des modif' à partir de fichiers LESS... Alors si vous avez une idée, suis pas contre (suis presque sûr encore de m'faire épingler "noob de la semaine" )

Pour remédier à cela il faut intégrer le bootstrap directement dans ta feuille de style LESS pour que tout soit compiler en même temps via PHP.

Bonjour,

Sympa d'avoir pris le temps de répondre.

Toutefois, je ne suis pas sûr d'avoir compris ta réponse : qu'entends-tu par "intégrer le bootstrap directement dans ta feuille de style LESS" ?

Bonjour, je sais pas si tu as trouvé une réponse. je m'intéresse au Bootstrap mais je ne l'ai pas encore utilisé.

Pour ce que j'ai pu y comprendre :

1. Il y a un fichier less principal qui inclu les autres fichiers
2. Ce fichier est compilé dans l'entête de la page html.

Le Bootstrap utilise less.js, qui n'a pas exactement la même syntaxe que LESS php.

Donc, soit ton fichier less modifié est inclu dans l'entête de ta page, suivi du script less.js qui va l'interpréter côté client à la volée, soit tu compile en css avec l'outil qui te convient (exemple http://wearekiss.com/simpless) et tu sers directement la CSS sans passer par LESS...

J'espère que ça éclairci les choses

Bonjour,

dommage que le sujet ne suscite pas plus d'intérêt. Je teste en ce moment le framework css less.js.
Utilisateur de Twitter Bootstrap, je souhaiterais profiter de ses multiples variables et mixins. Mais voilà, je n'ai pas trouvé de mode d'emploi.
J'utilise un fichier "styles.less", qui est correctement interprété en tant que fichier "styles.css" grâce au compilateur Crunch.
Dans un projet de test, j'ai récupéré le répertoire "less" de twitter Bootstrap, qui contient tous les fichiers .less.
Dans l'entête de mon site j'appelle le fichier "bootstrap.less". Celui-ci devrait importer tous les autres fichiers .less via des variables (ex : @import "variables.less";).
Pourtant je n'arrive à utiliser aucune des variables des fichiers de Boostrap, à moins de faire un copier/coller dans mon fichier "styles.less"…

Petit ajout :

en fait je peux compiler tous les fichiers .less de Bootstrap en ne déclarant dans l'entête du fichier html que mon fichier "styles.less".

Dans celui-ci j'importe le contenu du fichier "bootstrap.less" (via @import "bootstrap/bootstrap.less";) ; celui-ci important à son tour tous les autres (ex : @import "variables.less";).

Pour débugger, en revanche, Firebug est dans l'incapacité de pointer vers le fichier .less, et encore moins vers la ligne à modifier ! Aïe, aïe, aïe…

Je reste donc sceptique.

Avis aux utilisateurs de .Less avec Twitter Bootstrap, pour nous donner la bonne méthodologie.