Less vers CSS Convertisseur
Convertir du code Less en CSS prêt pour le navigateur
Less en entrée
CSS compilé
Exemples Less vers CSS
Les variables, mixins et l'imbrication Less se compilent en CSS brut. Exemple :
Variables, mixins et sélecteurs imbriqués
Less en entrée :
CSS compilé :
Utilisez Exemple ci-dessus pour charger plus de données d'exemple.
Qu'est-ce que Less vers CSS ?
Less est un préprocesseur CSS qui ajoute des variables, l'imbrication, les mixins et les fonctions. Les navigateurs n'exécutent pas Less—ils ont besoin de CSS brut. Cet outil compile votre Less en CSS prêt pour le navigateur. La documentation Less définit la syntaxe.
La compilation s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. La sortie est du CSS standard. Pour l'inverse (CSS vers Less), utilisez CSS vers Less. Pour SCSS, utilisez SCSS vers CSS.
Comment utiliser cet outil
Coller ou télécharger du Less
Copiez votre Less et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .less ou .css. Le bouton Exemple charge des données d'exemple. Un Less invalide affichera une erreur.
Voir le CSS compilé
Le panneau de droite affiche le CSS compilé. Les variables sont résolues, l'imbrication est aplatie et les mixins sont développés. La sortie est du CSS brut utilisable par tout navigateur.
Copier ou télécharger
Utilisez Copier ou Télécharger. Pour formater la sortie, utilisez le Formateur CSS. Pour minifier, utilisez le Minificateur CSS.
Quand Less vers CSS aide
Lorsque vous avez du Less d'un projet (ex. Bootstrap 3, Ant Design) ou d'une base de code legacy mais que vous avez besoin de CSS brut—pour un test rapide, un déploiement CDN ou un système sans outils de build—cette compilation aide. C'est aussi utile pour le débogage : voir exactement quel CSS produit votre Less.
Less est utilisé par de nombreux projets anciens et certains frameworks UI. Si vous personnalisez des variables ou extrayez des styles, compiler ici vous donne le CSS final. Pour convertir du CSS existant en structure Less, utilisez CSS vers Less.
Questions fréquentes
Less vs SCSS ?
Les deux ajoutent des variables, l'imbrication et les mixins. Less utilise & pour les sélecteurs parent ; SCSS aussi. La syntaxe diffère légèrement. Choisissez selon votre projet.
Prend-il en charge @import ?
Les imports peuvent ne pas se résoudre si les fichiers ne sont pas téléchargés. Pour les projets multi-fichiers, utilisez le compilateur Less officiel ou votre bundler.
Mes données sont-elles privées ?
Oui. La compilation s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Qu'en est-il des mixins et fonctions ?
Les mixins et fonctions intégrées (ex. <code>lighten()</code>, <code>darken()</code>) sont développés pendant la compilation. Le CSS de sortie contient les valeurs résolues.
Puis-je l'utiliser avec Bootstrap 3 ?
Bootstrap 3 utilise Less. Pour une compilation Bootstrap complète, utilisez le build officiel. Cet outil fonctionne pour du Less en fichier unique ou des extraits.
Outils connexes
Pour Less : lesscss.org et utilisation de Less. MDN CSS et W3C CSS définissent le format de sortie.