SCSS en entrée

CSS compilé

Exemples SCSS vers CSS

Les variables et l'imbrication SCSS se compilent en CSS brut. Exemple :

Variables et sélecteurs imbriqués

SCSS en entrée :

Entrée

CSS compilé :

Sortie

Utilisez Exemple ci-dessus pour charger plus de données d'exemple.

Qu'est-ce que SCSS vers CSS ?

SCSS (Sassy CSS) est un préprocesseur CSS qui ajoute des variables, l'imbrication, les mixins et plus encore. Les navigateurs n'exécutent pas le SCSS—ils ont besoin de CSS brut. Cet outil compile votre SCSS (ou SASS) en CSS prêt pour le navigateur. La documentation Sass définit la syntaxe.

La compilation s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. La sortie est du CSS standard. Pour l'inverse (CSS vers SCSS), utilisez CSS vers SCSS. Pour Less, utilisez Less vers CSS.

Comment utiliser cet outil

Coller ou télécharger du SCSS

Copiez votre SCSS ou SASS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .scss ou .sass. Le bouton Exemple charge des données d'exemple. Un SCSS invalide affichera une erreur.

Voir le CSS compilé

Le panneau de droite affiche le CSS compilé. Les variables sont résolues, l'imbrication est aplatie et les mixins sont développés. La sortie est du CSS brut utilisable par tout navigateur.

Copier ou télécharger

Utilisez Copier ou Télécharger. Pour formater la sortie, utilisez le Formateur CSS. Pour minifier, utilisez le Minificateur CSS.

Quand SCSS vers CSS aide

Lorsque vous avez du SCSS d'un projet, d'un design system ou d'une base de code legacy mais que vous avez besoin de CSS brut—pour un test rapide, un modèle d'email ou un système sans outils de build—cette compilation aide. Des frameworks comme Bootstrap et Foundation utilisent le SCSS. Pour les builds de production, Dart Sass et webpack compilent le SCSS. C'est aussi utile pour le débogage : voir exactement quel CSS produit votre SCSS.

De nombreux frameworks (Bootstrap, Foundation) utilisent le SCSS. Si vous personnalisez des variables ou extrayez des styles, compiler ici vous donne le CSS final. Pour convertir du CSS existant en structure SCSS, utilisez CSS vers SCSS.

Questions fréquentes

SCSS vs SASS ?

SCSS utilise des accolades comme le CSS. SASS utilise l'indentation (pas d'accolades). Les deux compilent vers le même CSS. Cet outil prend en charge les deux syntaxes.

Prend-il en charge @import ?

Les imports partiels peuvent ne pas se résoudre si les fichiers ne sont pas téléchargés. Pour les projets multi-fichiers, utilisez un outil de build comme Dart Sass ou votre bundler. Voir Sass CLI.

Mes données sont-elles privées ?

Oui. La compilation s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Qu'en est-il des mixins et fonctions ?

Les mixins et fonctions sont développés pendant la compilation. Le CSS de sortie contient les valeurs résolues. Les fonctions complexes sont prises en charge dans les capacités du compilateur.

Puis-je l'utiliser avec Bootstrap ?

Le SCSS de Bootstrap a de nombreux partiels et variables. Pour une compilation Bootstrap complète, utilisez le build officiel ou npm. Cet outil fonctionne pour du SCSS en fichier unique ou des extraits.

Outils connexes

Pour Sass/SCSS : sass-lang.com et documentation Sass. MDN CSS et W3C CSS définissent le format de sortie.

SCSS vers CSS Convertisseur