SCSS-indata

Kompilerad CSS

Vad är SCSS till CSS-konvertering?

Webbläsare förstår inte SCSS (Sassy CSS) — de behöver vanlig CSS. Det här verktyget kompilerar SCSS-kod till standard-CSS som webbläsare kan använda. Det bearbetar variabler, mixins, nästling och alla Sass-funktioner och producerar ren produktionsklar CSS.

Enligt MDN Web Docs är Sass-kompilering nödvändig för att använda preprocessorfunktioner i webbutveckling. Vår kompilator följer den officiella Sass-specifikationen med stöd för nästlade selektorer, variabler och funktioner. Som web.dev påpekar bör kompilerad CSS minifieras för produktion.

Allt kompileras i din webbläsare. Ingen installation, ingen byggkonfiguration — bara omedelbar CSS-utdata.

Hur man använder SCSS till CSS-konverteraren

Följ dessa steg för att kompilera SCSS till webbläsarredo CSS. Varje steg använder faktiska knappar och paneler på den här sidan.

Klistra in, ladda upp eller läs in exempel

Klistra in SCSS i den vänstra panelen SCSS-indata eller klicka på Ladda upp för att ladda upp en .scss- eller .sass-fil. Klicka på Exempel för att se exempelformat med variabler och nästling. Exempel på SCSS-indata:

$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; } }

Granska kompilerad CSS

Den högra panelen Kompilerad CSS visar utdata direkt. Variabler löses upp, nästling expanderas och mixins bearbetas.

Kopiera eller ladda ner

Klicka på Kopiera för att kopiera till urklipp, eller Ladda ner för att spara som .css. Använd Rensa för att börja om. All kompilering sker i din webbläsare.

När du ska kompilera SCSS till CSS

Snabb testning

Testar du SCSS-kodavsnitt utan att konfigurera en hel byggprocess? Kompilera här direkt. Utmärkt för att experimentera med Sass-funktioner, prototypa stilar eller felsöka kompileringsproblem.

Lär dig Sass

Ny med Sass? Skriv SCSS och se den kompilerade CSS-utdatan direkt. Förstå hur variabler expanderas, hur nästling fungerar och hur mixins kompileras. Ett perfekt läroverktyg.

Enkla projekt

Litet projekt som inte behöver ett byggsystem? Kompilera SCSS här manuellt. Skriv lokalt i SCSS, kompilera när du är redo och distribuera CSS. Inga byggverktyg behövs.

Felsökning av kompilering

Uppför sig ditt byggverktyg konstigt? Isolera problemet genom att kompilera här. Se den exakta CSS-utdatan utan störningar från byggkonfigurationen.

Vanliga frågor

Vilka Sass-funktioner stöds?

Variabler, nästling, mixins, funktioner, importer och de flesta standard Sass-funktioner. Komplexa funktioner som anpassade funktioner eller vissa avancerade direktiv kan ha begränsningar jämfört med fullständiga Sass-kompilatorer.

Är den kompilerade CSS:en produktionsklar?

Ja, men överväg minifiering. Den kompilerade CSS:en är funktionell men formaterad med indragningar och mellanslag. Använd vår CSS-minifierare för att komprimera den för produktionsdriftsättning.

Ska jag använda detta eller ett byggverktyg?

För produktionsprojekt använd byggverktyg som Webpack, Vite eller Gulp. De kompilerar automatiskt och integreras med ditt arbetsflöde. Det här verktyget är utmärkt för snabb testning, inlärning eller enkla projekt.

Stöder det @import-satser?

Grundläggande stöd för @import fungerar, men importer av externa filer är begränsade eftersom allt körs i webbläsaren. För projekt med flera SCSS-filer använd ett ordentligt byggverktyg.

Kan jag konvertera CSS tillbaka till SCSS?

Ja! Använd vår CSS till SCSS-konverterare. Den tillämpar nästling och omstrukturerar CSS till SCSS-format.

Vad händer om min SCSS har fel?

Kompileringsfel visas med detaljer enligt Sass felrapportering. Rätta syntaxfelen i din SCSS och försök igen.

SCSS till CSS-konverterare