CSS en entrée

Less converti

Exemples CSS vers Less

Les sélecteurs CSS plats sont convertis en Less imbriqué. Exemple :

Structure imbriquée à partir de CSS plat

CSS en entrée :

Entrée

Less converti :

Sortie

Utilisez Exemple ci-dessus pour charger plus de données d'exemple.

Qu'est-ce que CSS vers Less ?

Less est un préprocesseur CSS qui ajoute des variables, l'imbrication et les mixins. Convertir du CSS brut en Less le restructure avec l'imbrication et le prépare aux fonctionnalités Less. Cet outil analyse votre CSS et produit une structure de type Less. Les spécifications W3C CSS définissent la source ; Less définit la sortie.

La conversion s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. La sortie est du Less valide. Pour l'inverse (Less vers CSS), utilisez Less vers CSS. Pour SCSS, utilisez CSS vers SCSS.

Comment utiliser cet outil

Coller ou télécharger du CSS

Copiez votre CSS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .css. Le bouton Exemple charge des données d'exemple. Un CSS invalide affichera une erreur.

Vérifier la sortie Less

Le panneau de droite affiche le Less converti. Les sélecteurs peuvent être imbriqués là où la structure le permet. Vous pouvez ajouter des variables et mixins manuellement après la conversion.

Copier ou télécharger

Utilisez Copier ou Télécharger. Compilez le Less avec Less vers CSS pour vérifier. Pour formater le CSS d'abord, utilisez le Formateur CSS.

Quand CSS vers Less aide

Lors de la migration d'un projet du CSS brut vers Less, ou lorsque vous avez du CSS d'une exportation de design et souhaitez l'intégrer dans une base de code basée sur Less (ex. Bootstrap 3, Ant Design), cette conversion fournit un point de départ. Les outils de build comme webpack et Gulp compilent Less. La sortie vous donne une structure imbriquée que vous pouvez affiner avec des variables et mixins.

Les outils de design exportent souvent du CSS brut. Convertir en Less ici vous permet de l'ajouter à une structure basée sur les composants. Pour SCSS à la place, utilisez CSS vers SCSS. Pour les préfixes vendeur, utilisez le Préfixeur CSS.

Questions fréquentes

Ajoute-t-il des variables ou mixins ?

Le convertisseur se concentre sur la structure (imbrication). Il n'extrait pas automatiquement les valeurs répétées en variables. Ajoutez des variables et mixins manuellement selon vos besoins.

Mes données sont-elles privées ?

Oui. La conversion s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Comment fonctionne l'imbrication ?

L'outil déduit l'imbrication des relations entre sélecteurs (ex. .parent .child devient imbriqué). Les sélecteurs complexes peuvent rester plats. Vérifiez et ajustez si nécessaire.

Less vs SCSS ?

Les deux ajoutent des variables, l'imbrication et les mixins. Less est utilisé par Bootstrap 3, Ant Design. SCSS est utilisé par Bootstrap 4+, de nombreux frameworks modernes. Choisissez selon votre stack.

Puis-je compiler la sortie ?

Oui. Collez le Less dans Less vers CSS pour compiler et vérifier. La sortie devrait correspondre à votre structure CSS d'origine.

Outils connexes

Pour Less : lesscss.org. W3C CSS et MDN CSS définissent le format source. Bootstrap. webpack. Figma.

CSS vers Less Convertisseur