SCSS-inndata

Kompilert CSS

Hva er SCSS til CSS-konvertering?

Nettlesere forstår ikke SCSS (Sassy CSS) — de trenger vanlig CSS. Dette verktøyet kompilerer SCSS-kode til standard-CSS som nettlesere kan bruke. Det behandler variabler, mixins, nesting og alle Sass-funksjoner og produserer ren produksjonsklar CSS.

Ifølge MDN Web Docs er Sass-kompilering nødvendig for å bruke preprocessorfunksjoner i webutvikling. Kompilatoren vår følger den offisielle Sass-spesifikasjonen. Som web.dev påpeker, bør kompilert CSS minifiseres for produksjon.

Alt kompileres i nettleseren din. Ingen installasjon, ingen byggekonfigurasjon — bare umiddelbar CSS-utdata.

Slik bruker du SCSS til CSS-konvertereren

Følg disse trinnene for å kompilere SCSS til nettleserklar CSS. Hvert trinn bruker faktiske knapper og paneler på denne siden.

Lim inn, last opp eller last inn eksempel

Lim inn SCSS i det venstre panelet SCSS-inndata, eller klikk på Last opp for å laste opp en .scss- eller .sass-fil. Klikk på Eksempel for å se eksempelformat med variabler og nesting. Eksempel på SCSS-inndata:

$primary-color: #1976d2;
$border-radius: 8px;
.subscriber-card { padding: 16px; border-radius: $border-radius; .plan-badge { color: $primary-color; font-weight: 700; } &:hover { background: #e3f2fd; } }

Vis kompilert CSS

Det høyre panelet Kompilert CSS viser utdata umiddelbart. Variabler løses opp, nesting utvides og mixins behandles.

Kopier eller last ned

Klikk på Kopier for å kopiere til utklippstavle, eller Last ned for å lagre som .css. Bruk Tøm for å starte på nytt. All kompilering skjer i nettleseren din.

Når du skal kompilere SCSS til CSS

Rask testing

Tester du SCSS-kodebiter uten å sette opp en hel byggeprosess? Kompiler her umiddelbart. Utmerket for å eksperimentere med Sass-funksjoner, prototype stiler eller feilsøke kompileringsproblemer.

Lær Sass

Ny med Sass? Skriv SCSS og se den kompilerte CSS-utdataen umiddelbart. Forstå hvordan variabler utvides, hvordan nesting fungerer og hvordan mixins kompileres. Et perfekt læringsverktøy.

Enkle prosjekter

Lite prosjekt som ikke trenger et byggesystem? Kompiler SCSS her manuelt. Skriv lokalt i SCSS, kompiler når du er klar og distribuer CSS. Ingen byggeverktøy nødvendig.

Feilsøking av kompilering

Oppfører byggeverktøyet ditt seg merkelig? Isoler problemet ved å kompilere her. Se den eksakte CSS-utdataen uten forstyrrelse fra byggekonfigurasjonen.

Vanlige spørsmål

Hvilke Sass-funksjoner støttes?

Variabler, nesting, mixins, funksjoner, imports og de fleste standard Sass-funksjoner. Komplekse funksjoner kan ha begrensninger sammenlignet med fullstendige Sass-kompilatorer.

Er den kompilerte CSS-en produksjonsklar?

Ja, men vurder minifisering. Den kompilerte CSS-en er funksjonell men formatert. Bruk vår CSS-minifiserer for å komprimere den for produksjon.

Bør jeg bruke dette eller et byggeverktøy?

For produksjonsprosjekter, bruk byggeverktøy som Webpack, Vite eller Gulp. Dette verktøyet er utmerket for rask testing, læring eller enkle prosjekter.

Støtter det @import-setninger?

Grunnleggende @import-støtte fungerer, men import av eksterne filer er begrenset siden alt kjører i nettleseren.

Kan jeg konvertere CSS tilbake til SCSS?

Ja! Bruk vår CSS til SCSS-konverterer.

Hva skjer hvis SCSS-en min har feil?

Kompileringsfeil vises med detaljer ifølge Sass feilrapportering. Rett syntaksfeilene og prøv igjen.

SCSS til CSS-konverterer