CSS en entrée

SCSS converti

Exemples CSS vers SCSS

Les sélecteurs CSS plats sont convertis en SCSS imbriqué. Exemple :

Structure imbriquée à partir de CSS plat

CSS en entrée :

Entrée

SCSS converti :

Sortie

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

Qu'est-ce que CSS vers SCSS ?

SCSS ajoute des variables, l'imbrication et les mixins au CSS. Convertir du CSS brut en SCSS le restructure avec l'imbrication et le prépare aux fonctionnalités SCSS. Cet outil analyse votre CSS et produit une structure de type SCSS. Les spécifications W3C CSS définissent la source ; Sass définit la sortie.

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

Comment utiliser cet outil

Coller ou télécharger du CSS

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

Vérifier la sortie SCSS

Le panneau de droite affiche le SCSS converti. Les sélecteurs peuvent être imbriqués là où la structure le permet. Vous pouvez ajouter des variables et mixins manuellement après la conversion.

Copier ou télécharger

Utilisez Copier ou Télécharger. Compilez le SCSS avec SCSS vers CSS pour vérifier. Pour formater le CSS d'abord, utilisez le Formateur CSS.

Quand CSS vers SCSS aide

Lors de la migration d'un projet du CSS brut vers le SCSS, ou lorsque vous avez du CSS d'une exportation de design et souhaitez l'intégrer dans une base de code basée sur SCSS (ex. Bootstrap 4+, Foundation), cette conversion fournit un point de départ. Les outils de build comme webpack et Vite compilent le SCSS. La sortie vous donne une structure imbriquée que vous pouvez affiner avec des variables et mixins.

Les outils de design comme Figma exportent souvent du CSS brut. Convertir en SCSS ici vous permet de l'ajouter à une structure basée sur les composants. Pour Less à la place, utilisez CSS vers Less. Pour les préfixes vendeur, utilisez le Préfixeur CSS.

Questions fréquentes

Ajoute-t-il des variables ou mixins ?

Le convertisseur se concentre sur la structure (imbrication). Il n'extrait pas automatiquement les valeurs répétées en variables. Ajoutez des variables et mixins manuellement selon vos besoins.

Mes données sont-elles privées ?

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

Comment fonctionne l'imbrication ?

L'outil déduit l'imbrication des relations entre sélecteurs. Les sélecteurs complexes peuvent rester plats. Vérifiez et ajustez si nécessaire.

CSS vers SCSS vs CSS vers Less ?

Les deux produisent une syntaxe de préprocesseur. SCSS est plus utilisé (Bootstrap 4+, nombreux frameworks). Less est utilisé par Bootstrap 3, Ant Design. Choisissez selon votre stack.

Puis-je compiler la sortie ?

Oui. Collez le SCSS dans SCSS vers CSS pour compiler et vérifier. La sortie devrait correspondre à votre structure CSS d'origine.

Outils connexes

Pour Sass/SCSS : sass-lang.com et documentation Sass. W3C CSS et MDN CSS définissent le format source. Voir aussi Bootstrap, Figma, webpack, Vite.

CSS vers SCSS Convertisseur