Convertir Sass en CSS en Ligne
Compile la syntaxe Sass indentee (.sass) en CSS pur. Gratuit, dans ton navigateur, sans Ruby, Dart ou Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Cas d'usage
Sass indente vers CSS sans rien installer
Projets legacy Ruby Sass
Compile les fichiers .sass de projets legacy qui utilisaient Ruby Sass, sans avoir besoin de l'installer.
Zero dependance
Pas de Ruby, Dart, Node.js ou npm requis. Fonctionne directement dans le navigateur.
Apprendre Sass
Essaie la syntaxe Sass indentee originale et vois le CSS genere instantanement.
100% prive
Ton code Sass n'est jamais envoye a aucun serveur. La compilation se fait dans ton navigateur.
Comment ça marche
Trois étapes, sans complications
Colle ou charge ton fichier .sass
Glisse ton fichier .sass ou colle du code avec la syntaxe indentee (sans accolades ni points-virgules). Les fichiers .scss ne sont pas acceptes.
Compilation instantanee
Le compilateur Sass traite ton code dans le navigateur et genere du CSS valide instantanement. Les erreurs de syntaxe sont signalees avec leurs numeros de ligne.
Copie ou telecharge le CSS
Copie le CSS resultant dans le presse-papiers ou telecharge-le sous forme de fichier .css pret a utiliser dans n'importe quel projet web.
FAQ
Des questions ?
Ce sont deux syntaxes differentes du meme preprocesseur Sass. La syntaxe .sass (aussi appelee syntaxe indentee ou Sass original) a ete creee par Hampton Catlin en 2006 et utilise l'indentation pour definir la hierarchie des regles, sans accolades ni points-virgules, similaire a la syntaxe de Python ou CoffeeScript. La syntaxe .scss (Sassy CSS) a ete introduite dans Sass 3 en mai 2010 et utilise la meme structure d'accolades et de points-virgules que le CSS standard, la rendant compatible avec le CSS existant et plus facile a adopter pour les developpeurs familiers avec CSS. Cet outil compile exclusivement la syntaxe .sass indentee. Pour .scss, utilise l'outil scss-to-css.
Hampton Catlin a concu Sass en 2006 alors qu'il travaillait comme developpeur web, influence par son experience avec Haml (un autre preprocesseur qu'il avait cree pour simplifier le HTML). La philosophie etait que le code de style devrait etre plus propre et moins verbeux que CSS : supprimer les accolades et les points-virgules reduisait le bruit visuel et imposait une indentation coherente ameliorant la lisibilite. La premiere implementation de Sass etait en Ruby, dans le cadre du framework Haml pour Ruby on Rails. Pendant plusieurs annees, Sass etait synonyme de syntaxe indentee et necessitait Ruby pour la compilation.
La syntaxe .sass prend en charge toutes les fonctionnalites Sass : variables ($color: #333), imbrication de selecteurs, mixins (@mixin et @include), heritage avec @extend, fonctions avec @function, operations mathematiques, imports avec @use et @forward (le systeme de modules moderne de Dart Sass, introduit dans Dart Sass 1.23 en octobre 2019 en remplacement de @import), directives de flux de controle (@if, @each, @for, @while), interpolation avec #{}, et l'operateur selecteur parent &. La seule difference avec .scss est syntaxique : indentation au lieu d'accolades et pas de points-virgules.
Il existe plusieurs scenarios ou tu ne peux pas ou ne veux pas installer un compilateur Sass dans ton environnement : quand tu travailles sur un ordinateur partage ou sans permissions d'installation, dans des environnements CI/CD restreints, quand tu dois rapidement modifier un fichier .sass herite d'un projet legacy utilisant Ruby Sass (qui a atteint sa fin de vie le 26 mars 2019), quand tu apprends Sass sans configurer un environnement de developpement complet, ou quand tu as besoin d'une verification rapide du CSS genere par un extrait Sass specifique. Convertir.ai fait tourner un compilateur Sass compile en WebAssembly directement dans ton navigateur, sans aucune dependance serveur.
L'outil compile la syntaxe indentee (.sass) compatible avec Dart Sass (l'implementation de reference officielle depuis 2019, date a laquelle Ruby Sass a atteint sa fin de vie le 26 mars 2019 et LibSass a ete deprecie en octobre 2020). La grande majorite du code .sass ecrit pour Ruby Sass est compatible avec Dart Sass, a l'exception du systeme de modules : @import a ete deprecie dans Dart Sass et remplace par @use et @forward. Si ton code .sass utilise extensivement @import, le CSS resultant peut inclure des avertissements de deprecation, mais la compilation fonctionnera quand meme.
La syntaxe indentee a ses partisans, qui soutiennent qu'elle produit un code plus propre et plus lisible : l'absence d'accolades et de points-virgules reduit le nombre de caracteres, l'indentation imposee ameliore la coherence du code, et la syntaxe est plus proche des langages modernes comme Python, CoffeeScript ou Pug. Cependant, l'adoption de .scss est massivement dominante dans l'industrie : les frameworks CSS modernes (Bootstrap 5, Foundation, Tailwind avec sa couche Sass) utilisent .scss, les environnements de developpement typiques (webpack, Vite, Parcel) configurent sass-loader ou le plugin Vite pour .scss par defaut, et la plupart des developpeurs sont plus familiers avec la syntaxe d'accolades de CSS. Pour les nouveaux projets, .scss est generalement le choix le plus pragmatique en raison d'un meilleur support des outils, des snippets et des IDEs.
Compiler Sass en CSS : syntaxe indentee .sass, heritage Ruby Sass et differences .sass vs .scss
Sass (Syntactically Awesome Style Sheets) a ete cree par Hampton Catlin en 2006, avec la premiere implementation developpee par Nathan Weizenbaum en Ruby. La syntaxe originale de Sass, connue sous le nom de syntaxe indentee ou simplement Sass (avec l'extension .sass), s'inspire de la philosophie de Haml, un autre preprocesseur cree par Catlin pour simplifier le HTML dans les applications Ruby on Rails. La syntaxe indentee elimine deux elements de CSS que Catlin considerait comme du bruit visuel inutile : les accolades qui delimitent les blocs de declaration, et les points-virgules qui separent les declarations individuelles. A la place, la hierarchie est definie par l'indentation, comme en Python, CoffeeScript ou les versions modernes de Pug (anciennement Jade). Ce choix de conception rend le code .sass notablement plus compact : un bloc CSS necessitant 6 caracteres de syntaxe (accolade ouvrante, saut de ligne, point-virgule, saut de ligne, accolade fermante) est reduit a la simple indentation. La premiere version publique de Sass a ete publiee en novembre 2006 dans le cadre du framework Haml pour Ruby on Rails, et pendant les premieres annees de son existence, compiler Sass necessitait d'avoir Ruby installe.
En mai 2010, Sass 3 a introduit la syntaxe SCSS (Sassy CSS, avec l'extension .scss), concue comme un sur-ensemble de CSS : tout fichier CSS valide est aussi un fichier SCSS valide. Cette decision strategique a massivement accelere l'adoption de Sass dans l'industrie, car les developpeurs pouvaient migrer des projets CSS existants vers SCSS en renommant simplement le fichier. Bootstrap a adopte Sass (dans sa variante SCSS) avec Bootstrap 3.0 en aout 2013, ce qui a consolide SCSS comme le standard de facto pour les preprocesseurs CSS. Dart Sass, l'implementation de reference actuelle de Sass, a ete lancee par Natalie Weizenbaum (qui a aussi developpe l'implementation Ruby originale) et l'equipe Google comme implementation principale en novembre 2016. Ruby Sass a atteint sa fin de vie le 26 mars 2019, et LibSass (l'implementation C++, plus rapide, utilisee par node-sass) a ete officiellement deprecie en octobre 2020. Depuis lors, Dart Sass est la seule implementation activement maintenue. Dart Sass prend entierement en charge la syntaxe indentee .sass, en plus de SCSS.
Le besoin de compiler la syntaxe .sass sans installer Ruby, Dart ou Node se presente dans plusieurs contextes pratiques. Le plus courant est la maintenance de projets legacy : des milliers de projets web developpes entre 2006 et 2014 utilisent la syntaxe .sass avec Ruby Sass, et quand un developpeur doit modifier les styles d'un de ces projets sans reconfigurer l'environnement de developpement original (qui peut necessite une version specifique de Ruby, le gem Sass a une version specifique, et potentiellement Bundler avec un Gemfile specifique), disposer d'un compilateur en ligne est la solution la plus rapide. Un autre contexte est la formation : la syntaxe indentee Sass est frequemment enseignee dans les cours de developpement web comme exemple de preprocesseurs CSS, car elle illustre clairement le concept d'imbrication de selecteurs et d'heritage ; les etudiants apprenant Sass dans un environnement educatif restreint (un Chromebook, une salle informatique, un environnement en bac a sable) ne peuvent pas installer de compilateurs locaux. Enfin, convertir .sass en CSS est la premiere etape pour migrer des projets utilisant la syntaxe indentee vers SCSS ou vers des solutions modernes basees sur PostCSS, les proprietes personnalisees CSS (variables CSS natives, supportees dans tous les navigateurs modernes depuis 2017) ou CSS Nesting (la specification CSS Nesting, implementee dans Chrome 112, Firefox 117 et Safari 16.5, qui rend la plupart des fonctionnalites d'imbrication de Sass obsoletes pour les projets ne supportant que les navigateurs actuels).