Convertir SCSS en CSS en Ligne
Compile ton code SCSS/Sass en CSS pur directement dans ton navigateur. Sans npm, sans Node.js, sans installation.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilateur SCSS vers CSS
Pourquoi utiliser ce compilateur SCSS ?
Zero configuration
Pas de npm install, pas de webpack, pas de Vite. Colle ton SCSS et obtiens du CSS en quelques secondes.
Dart Sass officiel
Utilise le compilateur officiel Dart Sass (WebAssembly). Compatibilite totale avec le standard moderne.
Confidentialite totale
Tout s'execute dans ton navigateur. Ton code n'est jamais envoye a un quelconque serveur.
Mixins, variables, imbrication
Prise en charge complete : $variables, &:selecteurs, @mixin/@include, @extend et boucles.
Comment ça marche
Trois étapes, sans complications
Ecris ou colle ton code SCSS
Colle ton code SCSS ou Sass dans l'editeur. Les variables, l'imbrication, les mixins, les fonctions et les selecteurs parents (&) sont tous pris en charge.
Compilation instantanee
Le CSS pur s'affiche automatiquement dans le panneau de droite. Le compilateur tourne localement dans ton navigateur.
Copie ou telecharge le CSS
Copie le CSS genere dans le presse-papiers ou telecharge-le sous forme de fichier .css pret pour la production.
FAQ
Des questions ?
Sass propose deux syntaxes. La syntaxe originale (extension .sass, creee en 2006) utilise l'indentation a la place des accolades et des points-virgules. Elle est plus compacte mais rompt la compatibilite avec le CSS standard. SCSS (Sassy CSS, extension .scss) a ete introduit dans Sass 3.0 en 2010 avec une syntaxe entierement compatible avec CSS : tout CSS valide est du SCSS valide. SCSS est rapidement devenu le standard de fait et c'est ce que la plupart des developpeurs utilisent aujourd'hui. Cet outil prend en charge les deux syntaxes.
Les variables SCSS se definissent avec le prefixe $ et peuvent stocker des couleurs, des tailles, des polices ou n'importe quelle valeur CSS. Par exemple : $couleur-principale: #3498db; $police-base: 'Inter', sans-serif; $espacement: 16px. On les utilise directement dans les proprietes : color: $couleur-principale. Contrairement aux proprietes personnalisees CSS (--variable), les variables SCSS sont resolues a la compilation et n'existent pas dans le CSS resultant. Pour un acces dynamique en temps reel (avec JavaScript), les proprietes personnalisees CSS sont l'outil adapte.
La communaute SCSS a une regle non ecrite : ne pas depasser 3 a 4 niveaux d'imbrication. Une imbrication trop profonde genere des selecteurs CSS tres specifiques (.composant .bloc .element .modificateur) qui sont difficiles a surcharger et augmentent la specificite inutilement. La methodologie BEM (Block-Element-Modifier) se marie bien avec SCSS car elle limite l'imbrication a 1 ou 2 niveaux tout en gardant une structure claire. Le selecteur parent & est utile pour les pseudo-classes (&:hover, &:focus) et les modificateurs (& .actif) sans augmenter la profondeur semantiquement.
Oui. Les mixins sont l'une des pierres angulaires de SCSS : ils se definissent avec @mixin nom($params) et s'invoquent avec @include nom(valeurs). Ils permettent de reutiliser des blocs CSS avec des variations. L'outil prend aussi en charge @extend (heritage de selecteurs), @function (fonctions personnalisees), @each, @for et @while (boucles), ainsi que @if/@else (conditions).
Il y a des cas ou configurer un environnement Node.js n'est pas pratique : explorer SCSS rapidement sans creer un projet, travailler sur une machine sans droits d'installation, faire une demo en direct, verifier le CSS produit par un fragment precis, ou simplement apprendre la syntaxe. Cet outil utilise le compilateur officiel Dart Sass (l'implementation de reference depuis la deprecation de LibSass en octobre 2020) compile en WebAssembly, garantissant une compatibilite totale avec le standard SCSS moderne.
LibSass etait l'implementation de Sass en C/C++ utilisee par le paquet npm node-sass, pendant des annees la facon la plus populaire de compiler SCSS dans des projets Node.js. L'equipe Sass a depreciee LibSass en octobre 2020 car elle ne pouvait pas suivre le rythme des nouvelles specifications. Dart Sass, l'implementation officielle ecrite en Dart et publiee en tant que JavaScript pur pour npm sous le nom de paquet sass, est depuis lors l'implementation de reference. Si tu as des projets utilisant node-sass, la migration vers le paquet sass est recommandee : c'est un remplacement direct dans la plupart des cas.
SCSS vers CSS en ligne : compile Sass sans npm ni Node.js dans le navigateur
Sass (Syntactically Awesome Style Sheets) est un langage de preprocessing CSS cree par Hampton Catlin et developpe principalement par Natalie Weizenbaum et Chris Eppstein. La premiere version est sortie en novembre 2006 dans le cadre du framework Haml pour Ruby. La syntaxe originale utilisait l'indentation a la place des accolades, inspiree de Python et YAML, la rendant plus compacte mais incompatible avec le CSS existant. Cette barriere a l'adoption a catalyse la creation de SCSS (Sassy CSS), introduit dans Sass 3.0 en octobre 2010 : une nouvelle syntaxe entierement compatible avec CSS3 ou tout fichier CSS valide est aussi un fichier SCSS valide. Les fonctionnalites centrales de SCSS - variables avec prefixe $, imbrication de selecteurs, selecteur parent & pour les pseudo-classes et variantes, directives @mixin et @include pour la reutilisation de code, et @extend pour l'heritage - ont resolu les problemes de maintenabilite du CSS pur a grande echelle que l'industrie affrontait depuis des annees.
L'ecosysteme des preprocesseurs CSS a connu son apogee entre 2012 et 2018. LESS (cree par Alexis Sellier en 2009) a ete le premier concurrent serieux de Sass, avec une syntaxe utilisant @ au lieu de $ pour les variables, adopte massivement grace a Bootstrap 3 (2013). Stylus (cree par TJ Holowaychuk en 2010) proposait une syntaxe encore plus flexible mais avec une adoption plus faible. SCSS a remporte la bataille de l'ecosysteme en partie grace a son adoption dans Bootstrap 4 (2018, qui est passe de LESS a SCSS), en partie via son integration dans des frameworks comme Compass et en partie parce qu'il est le standard dans Angular. Les implementations de Sass ont considerablement evolue : Ruby Sass (2006-2019, l'implementation originale, desormais sans maintenance), LibSass (implementation en C/C++, utilisee par node-sass, deprecee en octobre 2020), et Dart Sass (l'implementation de reference actuelle, publiee en 2016 et disponible en tant que paquet npm sass depuis 2018).
Le besoin d'un compilateur SCSS en ligne surgit dans des contextes tres specifiques du workflow de developpement frontend. Le plus frequent est l'exploration rapide : un developpeur veut tester comment un mixin specifique compile, verifier qu'une fonction de couleur produit le resultat attendu, ou comprendre le CSS produit par un schema d'imbrication particulier sans creer un nouveau projet. La solution la plus proche est le Sass Playground officiel (sass-lang.com/playground), mais son interface est minimaliste. Un autre cas est le travail dans des environnements sans permissions d'installation : machines d'entreprise avec restrictions npm, environnements CI/CD en lecture seule, ou sessions de formation. Le compilateur de Convertir.ai utilise Dart Sass compile en WebAssembly, qui tourne entierement dans ton navigateur a des vitesses comparables au compilateur natif, sans envoyer aucune ligne de code a des serveurs externes.