CSS til SCSS
Konverter CSS til SCSS med nesting
CSS-inndata
Konvertert SCSS
Eksempler på CSS til SCSS
Flate CSS-selektorer konverteres til nestet SCSS. Eksempel:
Nestet struktur fra flatt CSS
CSS-inndata:
Konvertert SCSS:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er CSS til SCSS?
SCSS legger til variabler, nesting og mixins i CSS. Å konvertere vanlig CSS til SCSS omstrukturerer med nesting og forbereder SCSS-funksjoner. Verktøyet analyserer CSS-en din og gir SCSS-lignende struktur. W3C CSS-spesifikasjonene definerer kilden; Sass definerer utdata.
Konvertering skjer helt i nettleseren din. Ingenting sendes til server. Utdata er gyldig SCSS. Omvendt (SCSS til CSS): SCSS til CSS. For Less: CSS til Less.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Gjennomgå SCSS-utdata
Høyre panel viser konvertert SCSS. Selektorer kan nestes der strukturen tillater det. Du kan legge til variabler og mixins manuelt etter konvertering.
Kopier eller last ned
Bruk Kopier eller Last ned. Kompiler SCSS med SCSS til CSS for å verifisere. Formater CSS først med CSS-formaterer.
Når CSS til SCSS hjelper
Ved migrering fra vanlig CSS til SCSS, eller når du har CSS fra designeksport og vil integrere i SCSS-basert kodebase (f.eks. Bootstrap 4+, Foundation), gir konverteringen et utgangspunkt. webpack og Vite kompilerer SCSS. Utdata gir nestet struktur du kan forbedre med variabler og mixins.
Designverktøy som Figma eksporterer ofte vanlig CSS. Konvertering til SCSS her lar deg legge det inn i komponentbasert struktur. For Less, bruk CSS til Less. For leverandørprefiks, CSS-prefiks.
Ofte stilte spørsmål
Legger det til variabler eller mixins?
Konvertereren fokuserer på struktur (nesting). Den trekker ikke automatisk gjentatte verdier til variabler. Legg til variabler og mixins manuelt etter behov.
Er dataene mine private?
Ja. Konvertering skjer helt i nettleseren din. Ingen data sendes til server.
Hvordan fungerer nesting?
Verktøyet utleder nesting fra selektorforhold. Komplekse selektorer kan forbli flate. Gjennomgå og juster.
CSS til SCSS vs CSS til Less?
Begge gir preprocessor-syntaks. SCSS er mer utbredt (Bootstrap 4+, mange rammeverk). Less brukes i Bootstrap 3, Ant Design. Velg etter stacken din.
Kan jeg kompilere utdata?
Ja. Lim SCSS inn i SCSS til CSS for å kompilere og verifisere. Utdata bør matche den opprinnelige CSS-strukturen.
Relaterte verktøy
Sass/SCSS: sass-lang.com og Sass-dokumentasjon. W3C CSS og MDN CSS definerer kildeformatet. Se også Bootstrap, Figma, webpack, Vite.