Sass naar CSS
Compileer Sass en SCSS online naar CSS. Realtime conversie met uitgebreide of gecomprimeerde uitvoer, foutregels en volledige ondersteuning voor variabelen, mixins en nesting.
Wat is het verschil tussen Sass en SCSS?
SCSS is de nieuwere, CSS-achtige syntaxis met accolades en puntkomma's. Sass (de ingesprongen syntaxis) gebruikt inspringing en regeleindes. Deze tool compileert beide - kies gewoon de syntaxis in de dropdown.
Welke Sass-functies worden ondersteund?
De compiler gebruikt de officiële Dart Sass-engine: variabelen, nesting, mixins, @include, functies, @use, @extend, controle-directieven zoals @if en @each en de gecomprimeerde uitvoerstijl worden allemaal ondersteund.
Hoe krijg ik gecomprimeerde CSS?
Zet de dropdown voor uitvoerstijl op Gecomprimeerd vóór het compileren. Witruimte en de laatste puntkomma worden verwijderd, wat het kleinst mogelijke stylesheet oplevert.
Waarom toont de fout een regelnummer?
Als je code een syntaxisfout bevat, meldt de Sass-engine de exacte regel en kolom waar het parsen mislukte, en de tool toont dat boven de uitvoer zodat je snel kunt corrigeren.
Wordt mijn Sass-code naar een server geüpload?
Nee. De volledige Dart Sass-engine zit in de pagina gebundeld en compileert lokaal in je browser. Je stylesheets verlaten je apparaat nooit - veilig zelfs voor privéprojecten.
Kan ik @import van lokale bestanden compileren?
Nee. De compiler werkt op één fragment in het geheugen en heeft geen toegang tot je bestandssysteem, dus bestandsgebaseerde imports en @use van externe partials kunnen niet worden opgelost.
Werkt het offline?
Ja. Nadat de pagina en het compilerpakket eenmaal geladen zijn, gebeurt de compilatie volledig op jouw machine, zonder verbinding.
Hoe gebruik ik de uitvoer?
Kopieer de gecompileerde CSS naar het klembord of download het als style.css met de knoppen onder de uitvoer, en link het in je HTML of plak het in de stylesheet van je project.
Hoe Sass naar CSS te gebruiken
Deze compiler draait de officiële Dart Sass-engine volledig in je browser. Plak SCSS of ingesprongen Sass en krijg direct nette CSS — variabelen, mixins, nesting en functies worden ondersteund, er wordt niets geüpload.
- Plak je Sass of SCSS in het invoerveld, of klik op Voorbeeld om een werkende demo met variabele en mixin te laden.
- Kies in de vervolgkeuzemenu's de syntaxis (SCSS of ingesprongen Sass) en de uitvoerstijl (Expanded of Compressed).
- Met Live compileren aan verschijnt de CSS terwijl je typt; anders klik je handmatig op Compileren.
- Bij een syntaxisfout verschijnen de exacte regelnummer en de melding boven de uitvoer, zodat je het snel kunt herstellen.
- Gebruik Kopiëren of Downloaden onder de uitvoer om je gecompileerde stylesheet als style.css op te halen.
Kies de uitvoerstijl Compressed om je stylesheet te minificeren — handig voor productie-builds rechtstreeks uit de bron.
Gerelateerde tools
- CSS Beautifier Formatteer en verfraai CSS-code direct. Converteer gecomprimeerde CSS naar leesbare code met aanpasbare opties.
- CSS Minifier Gratis online CSS minifier. Comprimeer en optimaliseer CSS-code direct door spaties, opmerkingen en onnodige tekens te verwijderen. Verklein de bestandsgrootte voor snellere webprestaties.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Flexbox Generator Visuele CSS Flexbox-generator met live preview. Pas flex-eigenschappen aan en krijg direct bruikbare CSS-code.
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- HTTP-verzoek Tester Test REST API's direct in je browser. Verstuur GET-, POST-, PUT-, DELETE-verzoeken met aangepaste headers, body en parameters. Bekijk responsstatus, headers en JSON-body direct.
- .htaccess-generator Genereer Apache .htaccess-regels voor redirects, herschrijvingen, beveiligingsheaders, caching en meer.