SCSS til CSS-kompilator — Gratis Online
Kompiler SCSS eller SASS til nettleserklar CSS øyeblikkelig. Gratis, kjører i nettleseren.
SCSS-inndata
Kompilert CSS
Eksempler på SCSS til CSS
SCSS-variabler og nesting kompileres til vanlig CSS. Eksempel:
Variabler og nestede selektorer
SCSS-inndata:
Kompilert CSS:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er SCSS til CSS?
SCSS (Sassy CSS) er en CSS-forprosessor som legger til variabler, nesting, mixins med mer. Nettlesere kjører ikke SCSS – de trenger vanlig CSS. Verktøyet kompilerer SCSS (eller SASS) til nettleserklar CSS. Sass-dokumentasjonen definerer syntaksen.
Kompilering skjer helt i nettleseren din. Ingenting sendes til en server. Utdata er standard CSS. For motsatt vei (CSS til SCSS) bruker du CSS til SCSS. For Less bruker du Less til CSS.
Slik bruker du verktøyet
Lim inn eller last opp SCSS
Kopier SCSS eller SASS og lim det inn i editoren til venstre. Du kan også klikke Last opp for en .scss- eller .sass-fil. Eksempel laster eksempeldata. Ugyldig SCSS viser feil.
Se den kompilerte CSS-en
Høyre panel viser kompilert CSS. Variabler løses, nesting flates ut og mixins utvides. Utdata er vanlig CSS som alle nettlesere forstår.
Kopier eller last ned
Bruk Kopier eller Last ned. For å formatere utdata bruker du CSS-formaterer. For minifisering bruker du CSS-minifiserer.
Når SCSS til CSS hjelper
Når du har SCSS fra et prosjekt, designsystem eller gammel kodebase men trenger vanlig CSS – til rask test, e-postmal eller system uten byggverktøy – hjelper denne kompileringen. Rammeverk som Bootstrap og Foundation bruker SCSS. I produksjon kompilerer Dart Sass og webpack SCSS. Nyttig også til feilsøking: du ser nøyaktig hvilken CSS SCSS-en produserer.
Mange rammeverk (Bootstrap, Foundation) bruker SCSS. Når du tilpasser variabler eller trekker ut stiler, gir kompilering her ferdig CSS. For å konvertere eksisterende CSS til SCSS-struktur bruker du CSS til SCSS.
Ofte stilte spørsmål
SCSS vs SASS?
SCSS bruker krøllparenteser som CSS. SASS bruker innrykk (uten krøllparenteser). Begge kompileres til samme CSS. Verktøyet støtter begge syntaksene.
Støtter den @import?
Delvise importer løses kanskje ikke hvis filer ikke er lastet opp. For prosjekter med mange filer bruker du et byggverktøy som Dart Sass eller bundleren din. Se Sass CLI.
Er dataene mine private?
Ja. Kompilering skjer helt i nettleseren din. Ingen data sendes til noen server.
Hva med mixins og funksjoner?
Mixins og funksjoner utvides under kompilering. Utdata-CSS inneholder de løste verdiene. Komplekse funksjoner støttes innen kompilatorens muligheter.
Kan jeg bruke med Bootstrap?
Bootstraps SCSS har mange partials og variabler. For full Bootstrap-kompilering bruker du offisiell build eller npm. Verktøyet fungerer for én SCSS-fil eller utdrag.
Relaterte verktøy
Om Sass/SCSS: sass-lang.com og Sass-dokumentasjonen. MDN CSS og W3C CSS definerer utdataformatet.