Aller au contenu
Numio

Convertir SCSS en CSS — Numio

Compile du SCSS (.scss, syntaxe à accolades) en CSS brut avec Dart Sass, puis ajoute les préfixes fournisseurs avec Autoprefixer. Les variables, @mixin/@include, l’imbrication et les modules intégrés comme sass:math sont résolus en règles CSS à plat.

Obtenir le CSS compilé d’un extrait .scss (par exemple un composant de style Bootstrap) pour le coller dans un projet sans étape de build Sass.

Scss

CSS

Quand l’utiliser

  • Obtenir le CSS compilé d’un extrait .scss (par exemple un composant de style Bootstrap) pour le coller dans un projet sans étape de build Sass.
  • Déboguer la façon dont l’imbrication, les sélecteurs & et les fonctions de couleur comme darken() se développent avant de committer des modifications SCSS.

Mode d’emploi

  1. Collez du SCSS dans l’éditeur Scss ou déposez-y un fichier .scss.
  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 SCSS

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #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 scss. 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.

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

@use "sass:math" et les autres modules intégrés sont-ils pris en charge ?

Oui. Les modules intégrés comme sass:math, sass:color et sass:map sont disponibles, car le code est compilé par Dart Sass. Seuls les imports de vos propres fichiers échouent, puisque seul le texte collé est envoyé.

Mon SCSS est-il envoyé à un serveur ?

Oui. La page envoie le code à son endpoint /api/sass-to-css pour la compilation. L’ajout des préfixes et le formatage se font ensuite dans votre navigateur. Évitez de coller du code que vous n’êtes pas autorisé à partager.

Puis-je l’utiliser pour la syntaxe indentée .sass ?

Non, cette page compile avec la syntaxe SCSS, donc le code basé sur l’indentation ne peut pas être analysé. Utilisez la page Sass vers CSS, qui envoie l’indicateur de syntaxe indentée à la même API.

Comment obtenir des préfixes fournisseurs pour les anciens navigateurs ?

Ouvrez Paramètres et activez des cibles comme "last 2 versions" ou "not ie < 11". Les requêtes sélectionnées sont transmises à Autoprefixer comme liste de navigateurs.

Spécifications et références