Aller au contenu
Numio

Convertir Sass en CSS — Numio

Compile la syntaxe indentée de Sass (.sass, sans accolades ni points-virgules) en CSS brut avec Dart Sass, puis exécute Autoprefixer pour les navigateurs cibles choisis. Les variables, les mixins (=name / +name) et l’imbrication sont résolus en règles CSS à plat.

Vérifier ce que donne à la compilation un fichier .sass en syntaxe indentée issu d’un ancien projet Rails ou de style Bulma, sans mettre en place une chaîne d’outils Sass.

Sass

CSS

Quand l’utiliser

  • Vérifier ce que donne à la compilation un fichier .sass en syntaxe indentée issu d’un ancien projet Rails ou de style Bulma, sans mettre en place une chaîne d’outils Sass.
  • Produire du CSS brut à partir d’un extrait .sass pour le coller dans un CMS, un modèle d’e-mail ou un codepen qui n’accepte pas Sass.

Mode d’emploi

  1. Collez du Sass dans l’éditeur Sass ou déposez-y un fichier .sass.
  2. Ouvrez Paramètres pour choisir les cibles d’Autoprefixer : defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Seul "defaults" est activé au départ.
  3. Copiez le résultat du panneau CSS ; c’est du CSS brut que vous pouvez enregistrer directement dans un fichier .css.

Entrée Sass

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

Détails et limites

La compilation a lieu sur le serveur : la page envoie votre code à /api/sass-to-css, qui appelle compileString de Dart Sass avec la syntaxe indentée. Autoprefixer et le formatage Prettier s’exécutent ensuite dans un Web Worker de votre navigateur.

Chaque entrée est compilée comme un fichier unique et autonome. Un @use ou @import de vos propres partials échoue avec "Can't find stylesheet to import" ; les modules intégrés comme @use "sass:math" fonctionnent.

Les préfixes fournisseurs dépendent des cibles sélectionnées. Dans l’exemple, user-select reçoit les préfixes -webkit- et -moz- avec la requête "defaults".

Si l’entrée ne produit aucun CSS (uniquement des variables, des mixins ou des fonctions), le résultat est un simple commentaire CSS indiquant qu’aucun CSS n’a été généré, et non une erreur.

FAQ

Quelle est la différence entre Sass et SCSS ici ?

Cette page attend la syntaxe indentée : imbrication par indentation, sans accolades ni points-virgules, avec les raccourcis =mixin et +include. Pour du code à accolades, utilisez la page SCSS vers CSS ; les deux appellent la même API avec un indicateur de syntaxe différent.

Puis-je importer des partials comme _variables.sass ?

Non. Le serveur compile uniquement le texte collé, sans système de fichiers ni chemins de chargement : les imports de vos propres fichiers échouent donc. Collez plutôt le contenu du partial au-dessus du code qui l’utilise.

Que se passe-t-il si mon fichier ne contient que des variables ou des mixins ?

Sass n’émet aucun CSS pour des déclarations jamais utilisées ; la page affiche donc le commentaire /* No CSS generated: ... */. Ajoutez une règle qui utilise les variables ou inclut le mixin pour obtenir une sortie.

La sortie est-elle minifiée ?

Non. Le CSS est développé et formaté avec Prettier. Les sélecteurs imbriqués comme &:hover sont écrits sous forme de règles séparées, comme .button:hover.

Spécifications et références