Bonjour, je suis nouveau sur le forum et j'ai découvert le site il n'y à pas longtemps. Très sympa !
Je suis en trin de développer un site pour une personne. Celui-ci est presque terminé, il ne me reste plus qu'à "peaufiner" les détails : les couleurs et styliser un peu les corps de textes. Pour coder le site j'ai utilisé Twitter Bootstrap. Je ne connais que très peu les Framework, je commence seulement à m'y intérésser.
Il à l'air d'être assez bien, mais je n'ai pas du tout comprendre. Mon but principale était de pouvoir faciliter le changement des couleurs sur le site car j'en avais marre de ré-écrire plusieurs fois le même code pour tester le jeu adéquat.
Déjà, je ne suis pas sur d'avoir tout compris avec LESS. Donc pour son utilisation, on dois créer une feuille "*.less" en plus de notre CSS. On écrit les codes dedans, on compil (j'utilise SimpLESS) et tout se ré-écrit dans une feuille "*.css". Jusque là ok.
Première question, je n'est pas compris à quoi sert le fichier "less.js" sur le site ? D'après ce que j'ai lu, il permettrais de se passer du compilateur ?
Deuxième question : Maintenant que mon site est finis (ou presque), est-ce vraiment utiles que je mette ça en place ?
Quand je test, il me crée un autre fichier "styles.css" minifié.
Et une dernière, n'y à -t- il pas moyen de faire une "compil" plus rapide que avec "SimpLESS" ? Je trouve ça chiant de devoir coder puis compiler le fichier tout le temps. Ne peut-on pas automatiser ça ?
Merci.
9 réponses
Bonjour,
Première question, je n'est pas compris à quoi sert le fichier "less.js" sur le site ? D'après ce que j'ai lu, il permettrais de se passer du compilateur ?
Tout à fait, Less.js te permet de lire des fichiers less au lieu de lire les fichiers css. Ca permet d'éviter la compilation. Concrètement, c'est pratique pour le développement mais à ne surtout pas faire en production. C'est très mauvais en terme d'accessibilité et de performances. Ton navigateur va devoir compiler les fichiers less à chaque chargement de page.
Deuxième question : Maintenant que mon site est finis (ou presque), est-ce vraiment utiles que je mette ça en place ?
Quand je test, il me crée un autre fichier "styles.css" minifié.
Pourquoi pas, le principe des précompilers est de simplifier le développement sur du long terme. Si tu sais que tu auras d'autres modifications à effectuer, je te conseille de le faire.
Voici la structure que j'utilise pour mon css :
css/
- style.css (fichier compilé et minifié, je n'écris jamais dans ce fichier)
less/ - partials/ (ici je met des composants réutilisable, genre alerts, buttons, panels, ...)
- modules/ (ici je met du code plus spécifique à une ou plusieurs vues mais que l'on ne peut regrouper dans un composants)
- vendor/ (ici je met du code réalisé par des développeurs tiers, soit en CSS, soit en Less)
Et une dernière, n'y à -t- il pas moyen de faire une "compil" plus rapide que avec "SimpLESS" ? Je trouve ça chiant de devoir coder puis compiler le fichier tout le temps. Ne peut-on pas automatiser ça ?
Normalement, je vois que Simpless compile tout seul. Le problème vient sans doute du fait que tu doives réactualiser la page je suppose. Dans ces cas là, tu peux aller voir livereload ou Prepros.
Si je ne te dis pas de bêtise, tu as deux choix pour la compilation :
-soit tu compile côté serveur, en ligne de commande avec lessc ou avec SimpLess comme tu fais
-soit tu compile côté client, en utilisant un script js qui va transformer tes fichiers less en css.
Je te conseille de compiler côté serveur, parce que côté client, plus ton less sera lourd, plus le temps de chargement de la page sera long.
Je n'ai pas compris ta deuxième question.
Pour ta dernière question, tu peux automatiser le processus de compilation de tes fichiers avec un lanceur de tâches.
Typiquement, à chaque sauvegarde de ton fichier less, ça va compiler automatiquement. Il faut regarder du côté de Grunt (lanceur de tâches) avec Grunt contrib less.
J'ai utilisé Grunt pour mes fichiers sass avec Foundation. Il devrait y avoir la même chose pour Bootstrap.
Ce lien peut t'aider je pense : http://fronto.be/blog/detail/getting-started-with-grunt
Merci à vous pour ces quelques précisions !
Je commence à mieux comprendre le fonctionnement. En faite au début, je m'attendais à ce qu'il m'importe les propriétées dans ma feuille de styles déjà existante, mais non ! Il en crée une nouvelle, du coup je vais rajouter la ligne dans les <link>. Je pensais ça car j'avais vu qu'il y à une propriété : @import, qui je pensais, était à rajouter dans notre feuille de styles principale. J'ai du m'enmêler un peu les pinceaux... Vous l'utilisez cette propriété ?
@prbaron : Tu à raison, en faite avec SimpLESS il met à jour automatiquement le fichier styles.css minifié et s'actualise tout seul avec LiveReload. Vraiment sympa.
Sinon merci pour la structure de fichier que tu m'a donnée, je crois que je vais utiliser une similaire. C'est vraiment une bonne idée de tout séparé (surtout pour la partie vendors que je mettait actuellement dans le même dossier que le styles). Par contre je n'ai pas trop compris à quoi te servait la partie "modules" ?
@Pewel : En faite pour ma deuxième question, prbaron y à répondu. C'est vrai que ça pourrait me servir de les mettre en place si je dois revenir sur le projet par la suite (on ne sais jamais).
J'ai regardé un peu les liens que tu m'a donné, ça à l'air pas mal. Si j'ai bien compris, par contre, il faut un serveur dédié ?
Je vais tester un peu mieux ce soir.
Wouaw ! Après quelques tests j'avoue que ces puissant. Ca va demander du temps de créer chaque fonctions, mais une fois que ce sera en place ça devrait marcher du feu de dieu.
Je me suis amusé à faire ça :
/* ----- Initialisation des variables border ----- */
@border-color: #FFAC0B;
@border-width-top: 5px;
@border-width-bottom: 2px;
@border-style-dashed: dashed;
@border-style-solid: solid;
@border-style-double: double;
/* ----- Déclaration border ----- */
@border-top: @border-width-top @border-style-solid @border-color;
@border-bottom: border-width-bottom @border-style-solid @border-color;
@border: @border-width-top @border-style-solid @border-color;
/* ----- Div contenant les propriétées ----- */
.header ul.nav li.current-page a { border-top: @border-top; }
.what-i-do .indications { border-bottom: @border-bottom; }
.description .hyp { border-bottom: @border-bottom; }
#map-canvas { border: @border; }Bon, au début ça marchait nickel, mais maintenant j'ai un problème avec SimpLESS : il ne veut plus compiler. Aperemment certaines personnes sur internet rencontre ce bug également. Je re-testerais demain ou je changerais de compilateur.
Bonne nuit !
Nope pas besoin d'un serveur dédié pour ça.
C'est un peu compliqué à prendre en main, mais une fois ton fichier Gruntfile créé, ça compilera tout seul tes .less en .css dans le repertoire que tu as mis.
Il y a des exemples sur le site de grunt et en tapant grunt less aussi.
Si vraiment toute fois tu n'y arrive pas je peux essayer de me replonger dedans mais avec un peu de patience tu peux y arriver.
Le dossier modules/ permet de mettre du code qui ne servira qu'une fois. Prenons par exemple le codage d'une page Contact. Tu vas avoir les inputs, le bouton de soumission. Ces éléments auront chacun une page dans partials/ (inputs.less et buttons.less) car ce sont des éléments qui pourront être repris dans d'autres pages. Par contre tu vas sans doute devoir ajouter du code personnalisé pour la page Contact pour placer le formulaire à un endroit spécifique, ... . Dans ce cas, tu ajoutes le code dans modules/contact.less.
Au cas ou tu utilise less.js, ne fait pas appel à ce fichier en bas de page car il te compile le less en bas de page aussi.
Pas de problème pour le chargement du html qui s'affichera sans le css. Même si c'est quelques milliseconde, il suffit d'avoir une mauvaise connexion et c'est dead...
Ps : n'oublie de pas de mettre ton sujet en résolu si tu as trouvé les réponses que tu cherchais. Au passage @prbaron et @pewel très bonne analyse :)
Oui très bien, merci à vous pour les explications.
@Pewel : Gruntjs à l'air vraiment sympa, j'ai regarder un peu. Je me pencherais plus en profondeur dessus après. Je vais continuer à utiliser SimpLess qui ai bien.
Je valide.
Hello !
Je suis tombé sur une très bonne présentation de grunt aujourd'hui.
Elle peut être utile à tout le monde, alors je partage :D