Compilateur SCSS en CSS

Ce Compilateur SCSS en CSS convertit la syntaxe Sass SCSS en CSS standard directement dans le navigateur. Il est conçu pour les développeurs front-end, les designers, les apprenants et les équipes de contenu qui ont besoin d'un moyen rapide de tester des variables, des imbrications, des mixins, des boucles et des formats de sortie sans ouvrir un pipeline de build complet.

Comment l'utiliser

1. Coller le code SCSS : Collez votre source SCSS dans l'éditeur, ou chargez l'un des exemples de démarrage rapide.
2. Choisir les options de sortie : Sélectionnez la syntaxe SCSS ou Sass et choisissez le style de sortie CSS que vous souhaitez.
3. Compiler le SCSS : Cliquez sur Compiler le SCSS pour exécuter le compilateur Sass dans votre navigateur.
4. Aperçu du CSS : Examinez le CSS généré, les métriques, les avertissements et l'aperçu en direct avant d'utiliser le résultat.
5. Copier ou télécharger : Copiez le CSS compilé dans votre presse-papiers ou téléchargez-le sous forme de fichier .css.

Ce que ce compilateur prend en charge

• La syntaxe SCSS avec accolades et points-virgules, ainsi que la syntaxe indentée Sass en option.
• Les variables, les sélecteurs imbriqués, les sélecteurs parents, les mixins, les includes, les boucles, les maps et les fonctions Sass courantes.
• Les styles de sortie CSS étendus, imbriqués, compacts et compressés pour différents besoins de révision et de transmission.
• Un cadre d'aperçu sandboxé pour que vous puissiez inspecter le résultat visuel sans affecter la page MiniWebtool.

SCSS vs CSS

Le CSS est le langage de feuille de style que les navigateurs comprennent. Le SCSS est une syntaxe Sass qui ajoute des fonctionnalités de création telles que des variables, l'imbrication, des mixins, des boucles, des maps et des partiels réutilisables. Avant qu'un navigateur puisse utiliser du SCSS, celui-ci doit être compilé en CSS simple.

Limitations

La compilation sur navigateur est idéale pour des vérifications rapides, mais elle ne peut pas lire automatiquement les fichiers de projet privés de votre système de fichiers local. Collez les partiels dans l'éditeur lorsque vous testez des importations. Pour les versions de production, exécutez votre pipeline de build normal pour les source maps, l'autopréfixage, la minification, l'intégration de framework et une compatibilité complète avec Dart Sass.

FAQ

Que fait un compilateur SCSS en CSS ?

Un compilateur SCSS en CSS transforme la syntaxe Sass SCSS telle que les variables, l'imbrication, les mixins, les boucles et les partiels en CSS standard que les navigateurs peuvent lire.

Ce outil compile-t-il le SCSS dans le navigateur ?

Oui. La source SCSS est compilée dans votre navigateur avec un moteur Sass JavaScript, de sorte que l'utilisation normale ne nécessite pas l'envoi de votre feuille de style aux serveurs de MiniWebtool.

Peut-il compiler la syntaxe indentée Sass ?

Oui. Basculez l'option de syntaxe de SCSS à Sass lorsque vous collez du code Sass indenté. SCSS reste le choix par défaut car c'est la syntaxe la plus courante pour les projets web.

Pourquoi une instruction @import ou @use a-t-elle échoué ?

Les compilateurs de navigateur ne peuvent pas lire automatiquement les fichiers de projet privés. Collez les partiels importés dans l'éditeur, ou compilez au sein de votre système de build lorsque votre feuille de style dépend de chemins de fichiers locaux.

Le CSS compilé est-il prêt pour la production ?

Le CSS généré est utile pour des tests rapides, la transmission, l'apprentissage et de courts extraits. Pour un build de production, exécutez toujours votre pipeline de projet pour l'autopréfixage, la minification, les source maps et le traitement spécifique au framework.