Stylus vers CSS Convertisseur — Gratuit Online
Convertissez du code Stylus en CSS standard instantanément, gratuit, dans le navigateur.
Stylus en entrée
CSS converti
Exemples Stylus vers CSS
Les variables et l'imbrication Stylus se compilent en CSS brut. Exemple :
Variables et sélecteurs imbriqués
Stylus en entrée :
CSS compilé :
Utilisez Exemple ci-dessus pour charger plus de données d'exemple.
Qu'est-ce que Stylus vers CSS ?
Vous avez un fichier .styl avec des variables, des sélecteurs imbriqués et cette syntaxe minimale et propre — mais le navigateur ne comprend que le CSS brut. Cet outil comble ce fossé. Stylus est un préprocesseur CSS connu pour sa syntaxe flexible : les accolades, points-virgules et deux-points sont tous optionnels. Comme Sass/SCSS et Less, il doit être compilé avant que les navigateurs puissent l'utiliser. Dans un projet complet, vous utiliseriez le package npm officiel de Stylus — pour des tests rapides ou des extraits, c'est excessif. Cet outil effectue la conversion entièrement dans votre navigateur. La sortie suit la spécification W3C CSS.
Collez du Stylus ou téléchargez un fichier .styl. L'outil gère les variables, l'imbrication et le sélecteur parent &. Il s'exécute entièrement dans votre navigateur. Pour SCSS ou Less, utilisez SCSS vers CSS ou Less vers CSS. Pour formater la sortie, utilisez le Formateur CSS.
Comment utiliser cet outil
Coller ou télécharger du Stylus
Collez votre code Stylus dans l'éditeur de gauche ou cliquez sur Télécharger pour charger un fichier .styl. Utilisez Exemple pour charger du Stylus d'exemple avec variables et imbrication.
Vérifier la sortie CSS
Le panneau de droite affiche le CSS compilé. Pour du Stylus complexe (mixins, fonctions, imports), le compilateur Stylus officiel peut être nécessaire. Pour la validation, utilisez le Validateur CSS.
Copier ou télécharger
Utilisez Copier ou Télécharger pour enregistrer le CSS. Pour minifier, utilisez le Minificateur CSS. Pour convertir le CSS en SCSS ou Less, utilisez CSS vers SCSS ou CSS vers Less.
Où la conversion Stylus aide
Stylus est utilisé dans les projets construits avec Vite, Webpack ou Gulp. Quand vous devez compiler un extrait sans build complet, ou inspecter ce que Stylus produit, cet outil aide. Les pipelines de build utilisent typiquement le paquet Stylus officiel.
Pour d'autres préprocesseurs, utilisez SCSS vers CSS ou Less vers CSS. Pour combiner des fichiers CSS, utilisez le Combineur CSS. Pour extraire le CSS du HTML, utilisez l'Extracteur CSS.
Questions fréquentes
Comment convertir Stylus en CSS sans installer quoi que ce soit ?
Collez simplement votre code Stylus dans cet outil et le CSS apparaît instantanément. Tout fonctionne dans le navigateur via JavaScript — sans npm, sans Node.js, sans étape de build. Votre code ne quitte pas votre appareil.
Cet outil supporte-t-il les variables et l'imbrication Stylus ?
Oui. Les variables (ex. $primary = #007bff), les sélecteurs imbriqués et le sélecteur parent & sont tous pris en charge. Pour les fonctionnalités avancées comme les mixins, fonctions et @import, utilisez le compilateur officiel Stylus.
Quelle est la différence entre Stylus, SCSS et Less ?
Les trois sont des préprocesseurs CSS. Stylus a la syntaxe la plus flexible — accolades, points-virgules et deux-points sont tous optionnels. SCSS est un sur-ensemble de CSS. Less est similaire à SCSS en syntaxe.
Pourquoi les fonctions comme darken() ne fonctionnent-elles pas ?
Les fonctions intégrées Stylus comme darken() nécessitent le runtime Stylus complet. Cet outil effectue uniquement une conversion statique. Pour un support complet, installez Stylus via npm.
Mon code Stylus est-il envoyé à un serveur ?
Non. Toute la conversion s'exécute entièrement dans votre navigateur. Votre code Stylus ne quitte pas votre appareil — pas de backend, pas de journalisation.