Stylus vers CSS Convertisseur
Convertir du code préprocesseur Stylus en CSS standard
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 ?
Stylus est un préprocesseur CSS avec des accolades optionnelles, des variables, des mixins et l'imbrication. Comme Sass et Less, il compile vers du CSS standard pour les navigateurs. Cet outil convertit Stylus en CSS dans votre navigateur—aucune étape de build requise. La spécification W3C CSS définit la sortie.
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
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.
Prend-il en charge toutes les fonctionnalités Stylus ?
Cet outil prend en charge les variables, l'imbrication et le sélecteur parent &. Les mixins, fonctions, @import et autres fonctionnalités avancées peuvent nécessiter le compilateur officiel.
Stylus vs SCSS vs Less ?
Tous sont des préprocesseurs CSS. Stylus a une syntaxe minimale (accolades/point-virgule optionnels). SCSS est compatible CSS. Less est similaire à SCSS. Utilisez celui qui correspond à votre stack.
Qu'en est-il de darken(), lighten() ?
Les fonctions intégrées Stylus comme <code>darken()</code> ne sont pas évaluées par ce convertisseur basique. Pour un support complet, utilisez le compilateur Stylus officiel dans votre build.
Puis-je convertir le CSS en Stylus ?
Cet outil convertit uniquement Stylus en CSS. Pour CSS vers un autre préprocesseur, utilisez CSS vers SCSS ou CSS vers Less.