SCSS-invoer

Gecompileerde CSS

SCSS naar CSS voorbeelden

SCSS-variabelen en nesting compileren naar platte CSS. Voorbeeld:

Variabelen en geneste selectors

SCSS-invoer:

Invoer

Gecompileerde CSS:

Uitvoer

Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.

Wat is SCSS naar CSS?

SCSS (Sassy CSS) is een CSS-preprocessor die variabelen, nesting, mixins en meer toevoegt. Browsers draaien geen SCSS—ze hebben platte CSS nodig. Dit hulpmiddel compileert uw SCSS (of SASS) naar browserklare CSS. De Sass-documentatie definieert de syntaxis.

Compilatie draait volledig in uw browser. Er wordt niets naar een server gestuurd. De uitvoer is standaard CSS. Voor de omgekeerde richting (CSS naar SCSS) gebruikt u CSS naar SCSS. Voor Less Less naar CSS.

Hoe dit hulpmiddel te gebruiken

Plak of upload SCSS

Kopieer uw SCSS of SASS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .scss- of .sass-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige SCSS toont een fout.

Bekijk de gecompileerde CSS

Het rechterpaneel toont de gecompileerde CSS. Variabelen worden opgelost, nesting wordt afgevlakt en mixins worden uitgebreid. De uitvoer is platte CSS die elke browser kan gebruiken.

Kopiëren of downloaden

Gebruik Kopiëren of Downloaden. Voor formatteren van de uitvoer de CSS Formatter. Voor minificeren de CSS Minificeerder.

Wanneer SCSS naar CSS helpt

Wanneer u SCSS hebt van een project, designsysteem of legacy-codebase maar platte CSS nodig hebt—voor een snelle test, e-mailtemplate of systeem zonder build-tools—helpt deze compilatie. Frameworks zoals Bootstrap en Foundation gebruiken SCSS. Voor productie-builds compileren Dart Sass en webpack SCSS. Ook nuttig voor debuggen: zie precies welke CSS uw SCSS produceert.

Veel frameworks (Bootstrap, Foundation) gebruiken SCSS. Als u variabelen aanpast of styles extraheert, geeft compileren hier u de uiteindelijke CSS. Voor bestaande CSS converteren naar SCSS-structuur gebruikt u CSS naar SCSS.

Veelgestelde vragen

SCSS vs SASS?

SCSS gebruikt accolades zoals CSS. SASS gebruikt inspringing (geen accolades). Beide compileren naar dezelfde CSS. Dit hulpmiddel ondersteunt beide syntaxen.

Ondersteunt het @import?

Partiële imports worden mogelijk niet opgelost als bestanden niet zijn geüpload. Voor multi-file projecten gebruikt u een build-tool zoals Dart Sass of uw bundler. Zie Sass CLI.

Zijn mijn gegevens privé?

Ja. Compilatie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.

Hoe zit het met mixins en functies?

Mixins en functies worden uitgebreid tijdens compilatie. De uitvoer-CSS bevat de opgeloste waarden. Complexe functies worden ondersteund binnen de mogelijkheden van de compiler.

Kan ik het gebruiken met Bootstrap?

Bootstrap's SCSS heeft veel partials en variabelen. Voor volledige Bootstrap-compilatie gebruikt u de officiële build of npm. Dit hulpmiddel werkt voor single-file SCSS of snippets.

Gerelateerde hulpmiddelen

Voor Sass/SCSS: sass-lang.com en Sass-documentatie. MDN CSS en W3C CSS definiëren het uitvoerformaat.

SCSS naar CSS Converter