Convertitore CSS a SCSS
Converti codice CSS in SCSS con annidamento
CSS di input
SCSS convertito
Esempi CSS a SCSS
I selettori CSS piatti vengono convertiti in SCSS annidato. Esempio:
Struttura annidata da CSS piatto
CSS di input:
SCSS convertito:
Usa Esempio in alto per caricare altri dati di esempio.
Cos'è CSS a SCSS?
SCSS aggiunge variabili, annidamento e mixin al CSS. La conversione da CSS normale a SCSS lo ristruttura con annidamento e lo prepara per le funzionalità SCSS. Questo strumento analizza il tuo CSS e produce una struttura in stile SCSS. Le specifiche W3C CSS definiscono la sorgente; Sass definisce l'output.
La conversione avviene interamente nel tuo browser. Nulla viene inviato a un server. L'output è SCSS valido. Per la direzione inversa (SCSS a CSS), usa SCSS in CSS. Per Less, usa CSS a Less.
Come usare questo strumento
Incolla o carica CSS
Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido mostrerà un errore.
Esamina l'output SCSS
Il pannello di destra mostra l'SCSS convertito. I selettori possono essere annidati dove la struttura lo permette. Puoi aggiungere variabili e mixin manualmente dopo la conversione.
Copia o scarica
Usa Copia o Scarica. Compila l'SCSS con SCSS in CSS per verificare. Per formattare prima il CSS, usa il Formattatore CSS.
Quando CSS a SCSS è utile
Quando si migra un progetto da CSS normale a SCSS, o quando si ha CSS da un'esportazione di design e si vuole integrarlo in un codebase basato su SCSS (es. Bootstrap 4+, Foundation), questa conversione fornisce un punto di partenza. Strumenti di build come webpack e Vite compilano SCSS. L'output ti dà una struttura annidata che puoi perfezionare con variabili e mixin.
Gli strumenti di design come Figma spesso esportano CSS normale. Convertirlo qui in SCSS ti permette di aggiungerlo a una struttura basata su componenti. Per Less invece, usa CSS a Less. Per i prefissi vendor, usa il Prefissatore CSS.
Domande Frequenti
Aggiunge variabili o mixin?
Il convertitore si concentra sulla struttura (annidamento). Non estrae automaticamente i valori ripetuti in variabili. Aggiungi variabili e mixin manualmente in base alle tue esigenze.
I miei dati sono privati?
Sì. La conversione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Come funziona l'annidamento?
Lo strumento deduce l'annidamento dalle relazioni tra i selettori. I selettori complessi potrebbero rimanere piatti. Esamina e adatta secondo le necessità.
CSS a SCSS vs CSS a Less?
Entrambi producono sintassi del preprocessore. SCSS è più ampiamente usato (Bootstrap 4+, molti framework). Less è usato da Bootstrap 3, Ant Design. Scegli in base al tuo stack.
Posso compilare l'output?
Sì. Incolla l'SCSS in SCSS in CSS per compilare e verificare. L'output dovrebbe corrispondere alla struttura del tuo CSS originale.
Strumenti Correlati
Per Sass/SCSS, vedi sass-lang.com e la documentazione Sass. W3C CSS e MDN CSS definiscono il formato sorgente. Vedi anche Bootstrap, Figma, webpack, Vite.