Konwerter CSS do SCSS
Konwertuj codice CSS in SCSS con annidamento
CSS di input
SCSS convertito
Esempi CSS do SCSS
I selettori CSS piatti vengono convertiti in SCSS annidato. Przyklad:
Struttura annidata da CSS piatto
CSS di input:
SCSS convertito:
Usa Przyklad in alto per caricare altri dane di esempio.
Cos'è CSS do 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 narzedzie 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 prawidlowy. Per la direzione inversa (SCSS do CSS), usa SCSS in CSS. Per Less, usa CSS a Less.
Come usare questo narzedzie
Incolla o carica CSS
Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy 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.
Kopiuj o scarica
Usa Kopiuj o Pobierz. Compila l'SCSS con SCSS in CSS per verificare. Per formattare prima il CSS, usa il Formater CSS.
Quando CSS do 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. Narzedzia di build come webpack e Vite compilano SCSS. L'output ti dà una struttura annidata che puoi perfezionare con variabili e mixin.
Gli narzedzia 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.
Czesto zadawane pytania
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 dane sono privati?
Sì. La conversione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Jak to dziala l'annidamento?
Lo narzedzie deduce l'annidamento dalle relazioni tra i selettori. I selettori complessi potrebbero rimanere piatti. Esamina e adatta secondo le necessità.
CSS do 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.
Powiazane narzedzia
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.