Comment utiliser : LESS vers CSS
- Collez votre code Less.
- Le CSS se compile au fur et à mesure de la saisie ; les erreurs indiquent la ligne concernée et une explication.
- Cochez « Minifier » pour la production, puis copiez ou téléchargez le CSS.
Ce que gère le compilateur
Il s’agit de Less.js, le compilateur Less officiel, exécuté dans votre navigateur : @variables, imbrication avec &, mixins (avec arguments et gardes), opérations comme @base * 2, fonctions de couleur telles que darken() et fade(), remontée des @media, échappement et e().
Less ou Sass
Les deux ajoutent variables, imbrication et mixins au CSS. Less est écrit en JavaScript et a été utilisé par Bootstrap 3 ainsi que de nombreux thèmes d’administration ; Sass (SCSS) est aujourd’hui plus répandu pour les nouveaux projets. Le CSS natif comble déjà une partie de l’écart avec les propriétés personnalisées et l’imbrication, prises en charge par les navigateurs modernes.
Imports
Les fichiers @import "variables.less" que vous avez créés ne peuvent pas être lus par le navigateur. Collez donc leur contenu au-dessus du code qui les utilise.
Confidentialité par conception
La compilation s’effectue entièrement dans votre navigateur : votre code n’est jamais envoyé sur un serveur, ce qui le rend adapté aux projets confidentiels.
Aussi recherché comme : compilateur less, convertir less en css, compiler less en ligne, convertisseur less css, lesscss compilateur.
Outils complémentaires : LESS vers CSS
- Compilateur SCSS vers CSS — Collez du SCSS ou du Sass indenté pour obtenir du CSS pur, compilé par le moteur officiel Dart Sass directement dans votre navigateur, avec des messages d’erreur qui indiquent la ligne exacte.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
- Convertisseur CSS vers Tailwind — Collez des règles ou déclarations CSS et obtenez les classes utilitaires Tailwind équivalentes pour chaque sélecteur, y compris les états hover: et les valeurs arbitraires comme p-[13px].