Convertir du CSS en SCSS (règles imbriquées)

Comment ça marche

Collez votre CSS dans le panneau de gauche ; la version imbriquée s'affiche aussitôt à droite. L'outil découpe chaque sélecteur aux espaces et aux combinateurs > + ~, puis imbrique dans un même bloc les règles consécutives qui commencent de la même façon. Les six règles de l'exemple donnent deux blocs de premier niveau : .menu ul, .menu li et .menu a entrent dans le bloc .menu, et .menu a:hover devient &:hover dans le bloc a. Les règles placées dans @media sont imbriquées de la même manière à l'intérieur, mais le bloc @media n'est jamais déplacé dans une règle ; le CSS compilé garde donc son ordre d'origine. Vous pouvez choisir SCSS (accolades et points-virgules), LESS, Sass indenté ou Stylus ; les formats indentés se passent d'accolades et de points-virgules. Les sélecteurs séparés par une virgule (.a, .b) ne sont pas découpés. Les commentaires sont retirés et la ligne de résultat indique leur nombre.

Cet outil est aussi connu sous le nom de convertir css en scss, css en scss, css en sass, imbriquer du css, css to scss, css to less.

Qu'est-ce que SCSS ?

Le SCSS (Sassy CSS) est la syntaxe du préprocesseur Sass la plus proche du CSS. Il utilise accolades et points-virgules et ajoute les règles imbriquées, les variables commençant par $, les blocs réutilisables avec @mixin et les calculs. Les navigateurs ne lisent pas le SCSS : un compilateur Sass le transforme d'abord en CSS classique. Tout fichier CSS valide est aussi un fichier SCSS valide, ce qui permet de faire migrer un projet existant petit à petit.

Qu'est-ce que Imbrication (nesting) ?

L'imbrication consiste à écrire les sélecteurs enfants d'un sélecteur à l'intérieur de son bloc : .menu { a { } } se compile en .menu a. Le signe & représente le sélecteur parent, donc a { &:hover { } } donne a:hover. On évite ainsi de répéter le même préfixe à chaque ligne, et la structure d'un composant devient visible dans le code. Une imbrication trop profonde produit toutefois des sélecteurs longs et trop spécifiques ; on conseille de ne pas dépasser trois ou quatre niveaux.

Quelle différence entre SCSS et Sass ?

Ce sont deux syntaxes du même compilateur Sass, avec les mêmes fonctions. Le SCSS (.scss) utilise accolades et points-virgules ; quiconque connaît le CSS le lit tout de suite, et tout fichier CSS est du SCSS valide. Le Sass indenté (.sass) supprime accolades et points-virgules et sépare les blocs par la seule indentation ; il est plus court, mais un espace de travers change le sens du code. La plupart des nouveaux projets choisissent le SCSS.

Pourquoi l'ordre des règles est conservé

Quand deux règles CSS visent le même élément avec la même spécificité, la dernière écrite l'emporte. Certains convertisseurs regroupent dans un bloc toutes les règles qui commencent par le même sélecteur, où qu'elles se trouvent dans le fichier ; dans le CSS compilé, ces règles changent de place et la couleur d'un bouton peut changer sans prévenir. Cet outil ne fusionne que des règles consécutives : si un autre bloc sépare deux règles .menu, la seconde reste un bloc à part.

Pour la même raison, les règles @media ne sont jamais déplacées dans un sélecteur. SCSS le permet, mais l'ordre de sortie change. Aucune variable ni mixin n'est déduit non plus : transformer une couleur répétée comme #1c1917 en variable $sombre est une décision qui revient à quelqu'un qui connaît le sens du code.

• .menu a { } → .menu { a { } }
• .menu a:hover { } → a { &:hover { } }
• .liste > li { } → .liste { > li { } } (Stylus : & > li)

Quel format de sortie choisir

Si votre projet utilise Sass avec des fichiers en .scss, choisissez SCSS ; c'est la syntaxe la plus répandue aujourd'hui, et tout CSS valide est aussi du SCSS valide. Si vos fichiers se terminent par .sass, choisissez Sass indenté ; il n'a ni accolades ni points-virgules et montre l'imbrication par la seule indentation, copiez-le donc sans toucher aux retraits.

Si vous travaillez sur un ancien thème comme Bootstrap 3 ou sur un projet en LESS, choisissez LESS ; l'imbrication s'y écrit comme en SCSS. Stylus est une syntaxe indentée utilisée dans certains projets Node.js ; les combinateurs imbriqués s'y écrivent & > li.

Questions fréquentes

Comment convertir du CSS en SCSS ?

Collez le CSS dans le panneau de gauche. L'outil découpe les sélecteurs comme .menu a, place a dans le bloc .menu et transforme les états comme :hover en &:hover. Comme tout CSS valide est déjà du SCSS valide, renommer le fichier en .scss fonctionnerait aussi ; l'outil apporte en plus la structure imbriquée et lisible.

Mon CSS compilé va-t-il changer ?

Non, les mêmes règles sortent dans le même ordre. L'outil ne fusionne que des règles consécutives, laisse les blocs @media à leur place et ne découpe pas les sélecteurs séparés par une virgule ; ces trois choix préservent l'ordre et le sens. Seuls les commentaires sont retirés.

Les couleurs sont-elles transformées en variables ?

Non. Le code seul ne dit pas quelle couleur est celle de la marque et laquelle se répète par hasard ; cette décision vous revient. Vous repérez les valeurs répétées dans le résultat et pouvez les déplacer à la main dans des variables commençant par $.

Mon code est-il envoyé quelque part ?

Non. La conversion se fait entièrement dans votre navigateur ; la feuille de style collée n'atteint aucun serveur.