Existe-t-il un moyen de compiler MOINS de fichiers en CSS (pour que chaque navigateur n'ait pas à le faire)?

20

J'envisage d' utiliser MOINS mais je grimace à l'idée d'un navigateur ayant JavaScript désactivé et que mon CSS ne soit pas lisible (et que le site soit affreux).

En outre, cela choque l'ingénieur en moi de forcer chaque navigateur à «compiler» ce fichier Less en .css alors que nous pourrions simplement le «compiler» une fois à chaque fois que nous le modifions.

css css-framework Clay Nichols
la source
1
@ Anonyme - Si vous consultez MOINS, vous devriez également jeter un œil à SASS et COMPASS.
Sorcy
Stylus et OOCSS sont également des produits similaires.
Lèse majesté
1
J'ai publié une réponse connexe expliquant comment configurer automatiquement la compilation MOINS sur le serveur: webmasters.stackexchange.com/questions/38386/…
romaninsh
3
Je ne savais pas que quelqu'un compilait MOINS dans les navigateurs!
Kenny Evitt

Réponses:

17

Oui. Vous pouvez utiliser une application qui compile automatiquement les fichiers MOINS en CSS sur votre machine de développement pendant que vous codez. Ensuite, téléchargez simplement le fichier CSS généré sur votre serveur lorsque vous avez terminé de développer.

pseudo
la source
11

J'utilise SimpLESS - faites glisser, déposez, terminé.

Sorcy
la source
10

MOINS est livré avec un binaire (lessc) qui vous permet de précompiler vos fichiers .less. Vous l'utilisez comme tel:

 $ lessc styles.less > styles.css

Mais je pense que la plupart des gens utilisent simplement la commande lessc -wou lessc --watchpour recompiler la feuille de style CSS automatiquement chaque fois que le fichier LESS est mis à jour. Vous pouvez également demander à lessc de réduire le CSS, par exemple lessc -w -x.

Edit: Juste pour clarifier, lessc est fourni avec l'installation côté serveur (c'est-à-dire lorsque vous installez less via le gestionnaire de paquets node.js). Mais vous pouvez le télécharger manuellement depuis GitHub .

lessc se trouve près de /bin/lessc. Il s'agit bien sûr d'un binaire * nix (devrait également fonctionner pour Mac), mais il existe un binaire Windows ( lessc.exe ) basé sur dotless, qui est un autre compilateur Windows LESS.

Mise à jour: utilisez less-watchpour compiler automatiquement.

Alternativement, de nombreux développeurs utilisent de nos jours des gruntexécuteurs de tâches comme pour gérer l'automatisation de la construction (compilation, minification, test, etc.). En utilisant grunt-contrib-watch, grunt-contrib-lesset grunt-contrib-livereload, vous pouvez vraiment rationaliser votre flux de travail de développement.

Par exemple, si vous utilisez yopour échafauder votre nouveau projet Web, il est préconfiguré pour surveiller vos fichiers MOINS / CSS / JS / HTML pour les modifications et recompiler les parties nécessaires de votre projet si nécessaire. Exécutez simplement grunt serveet vous êtes prêt à coder sans avoir à vous soucier de la compilation manuelle (LESS / SASS / CoffeeScript) / de la réduction / concaténation de votre code ou de l'actualisation manuelle de votre navigateur comme un homme des cavernes ...

Lèse majesté
la source
1
Je ne sais pas quelle version vous utilisez. Dans la dernière version 1.3.0, il n'y a pas de fonction --watch. Une demande d'extraction pour une fonctionnalité --watch a été supprimée il y a 9 mois. github.com/cloudhead/less.js/pull/246
Gerard Roche
@BullfrogBlues: Désolé, c'était de l'ancien lessc basé sur Ruby.
Lèse majesté
Remarque: "less-watch a été renommé fs-change. Utilisez-le à la place:. npm install -g fs-change"
Andrew Lott
6

Il existe un certain nombre d'options pour compiler MOINS en CSS sur le serveur, et celle que vous choisirez dépendra probablement de ce que vous utilisez pour le reste du site.

  • Si vous utilisez node.js, le lesscss d' origine fera le travail.
  • Si vous utilisez PHP, lessphp . Il a une API légèrement détraquée quand il s'agit de passer des variables depuis PHP, mais il fait le travail.
  • Si vous utilisez Ruby, SASS n'est pas MOINS, mais est tellement similaire que lorsque je suis passé de l'utilisation de SASS (projet personnel) à LESS (projet PHP au travail), je n'ai remarqué aucune différence autre que l'extension de fichier. Il a également une bibliothèque utile de mixins - COMPASS . Je n'ai pas essayé de les utiliser avec MOINS, mais je m'attends à ce qu'ils fonctionnent. (Apparemment, MOINS était à l'origine Ruby, donc il y a probablement un vieux compilateur flottant quelque part aussi).
  • Si vous utilisez ASP.Net, il y a .less . Je n'ai pas utilisé celui-ci, donc je ne sais pas comment cela fonctionne.
  • Si vous utilisez Java, lesscss4j termine la compilation avec l'environnement de script Rhino intégré de LESS et Java 6 d'origine.
  • Si vous utilisez Perl, il y a un module LESSp dans CPAN.
Peter Taylor
la source
2
Il y a un compilateur Ruby qui vient avec l'ancien joyau LESS Ruby mais il n'est plus mis à jour, donc beaucoup de nouvelles fonctionnalités ne fonctionneront pas dessus. Ainsi, si vous utilisez Ruby, je recommanderais simplement d'utiliser le lessccompilateur binaire basé sur la dernière version de less.js.
Lèse majesté
@ Lèsemajesté, j'irais avec SASS, mais je ne voulais pas être accusé d'avoir délibérément ignoré la possibilité de compiler LESS en Ruby.
Peter Taylor
1
Oui, je pense que SASS serait la meilleure option pour Ruby puisque la gemme LESS a été déconseillée depuis le passage à JS.
Lèse majesté