Comment utiliser : Compilateur SCSS vers CSS
- Collez votre SCSS, ou passez à la syntaxe Sass indentée.
- Le CSS se compile au fur et à mesure de la saisie ; les erreurs affichent la ligne et la colonne.
- Choisissez une sortie développée ou minifiée, puis copiez ou téléchargez le CSS.
Ce que le compilateur prend en charge
Il s’agit de Dart Sass, l’implémentation de référence de Sass, exécutée dans votre navigateur. Tout le langage fonctionne : variables, imbrication avec &, mixins et @include, @extend, fonctions, maps, boucles, conditions @if, ainsi que le système de modules avec @use pour les modules intégrés comme sass:math et sass:color.
SCSS ou Sass indenté
SCSS est une surcouche de CSS avec accolades et points-virgules : tout CSS valide est du SCSS valide. La syntaxe indentée (fichiers .sass), plus ancienne, remplace les accolades par l’indentation et les points-virgules par des retours à la ligne. Les deux produisent le même CSS ; choisissez celle qu’utilisent vos fichiers.
Imports d’autres fichiers
Un navigateur ne peut pas lire les autres fichiers de votre projet : les @use "variables" ou @import "mixins" de vos propres partiels ne seront donc pas résolus ici. Collez le contenu des partiels au-dessus du code qui les utilise. Les avertissements de dépréciation de Sass, par exemple pour darken(), s’affichent sous le résultat avec le remplacement suggéré.
Confidentialité by design
La compilation s’effectue entièrement dans votre navigateur : votre code n’est jamais envoyé sur un serveur, ce qui le rend adapté aux projets propriétaires.
Aussi recherché comme : scss en css, sass en css, compilateur scss en ligne, compiler sass en ligne, convertir scss en css, convertisseur scss, compilateur sass, scss vers css.
Outils complémentaires : Compilateur SCSS vers CSS
- LESS vers CSS — Collez votre code Less et obtenez du CSS standard, compilé dans votre navigateur par le moteur officiel Less.js.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
- Convertisseur CSS vers Tailwind — Collez des règles ou déclarations CSS et obtenez les classes utilitaires Tailwind équivalentes pour chaque sélecteur, y compris les états hover: et les valeurs arbitraires comme p-[13px].
Questions fréquentes
S’agit-il du vrai compilateur Sass ?
sass en ligne de commande.