SCSS–CSS-kääntäjä — Ilmainen verkossa
Käännä SCSS tai SASS selainvalmiiksi CSS:ksi välittömästi. Ilmainen, toimii selaimessa.
SCSS-syöte
Käännetty CSS
Esimerkkejä SCSS → CSS
SCSS-muuttujat ja sisäkkäisyys käännetään tavalliseksi CSS:ksi. Esimerkki:
Muuttujat ja sisäkkäiset valitsimet
SCSS-syöte:
Käännetty CSS:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää esimerkkidataa.
Mikä on SCSS → CSS?
SCSS (Sassy CSS) on CSS-esikäsittelijä, joka lisää muuttujia, sisäkkäisyyttä, mixinejä ja muuta. Selaimet eivät aja SCSS:ää – ne tarvitsevat tavallisen CSS:n. Työkalu kääntää SCSS:si (tai SASS:in) selaimelle kelpaavaksi CSS:ksi. Sassin dokumentaatio määrittelee syntaksin.
Käännös tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Tulos on tavallista CSS:ää. Käänteiseen suuntaan (CSS → SCSS) käytä CSS SCSS:ksi -työkalua. Lessille käytä Less CSS:ksi.
Miten työkalua käytetään
Liitä tai lataa SCSS
Kopioi SCSS tai SASS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .scss- tai .sass-tiedoston. Esimerkki-painike lataa esimerkkidataa. Virheellinen SCSS näyttää virheen.
Katso käännetty CSS
Oikea paneeli näyttää käännetyn CSS:n. Muuttujat ratkaistaan, sisäkkäisyys litistetään ja mixin laajennetaan. Tulos on tavallista CSS:ää, jota mikä tahansa selain ymmärtää.
Kopioi tai lataa
Käytä Kopioi tai Lataa. Tuloksen muotoiluun käytä CSS-muotoilijaa. Tiivistämiseen käytä CSS-tiivistintä.
Milloin SCSS → CSS auttaa
Kun sinulla on SCSS:ää projektista, design-järjestelmästä tai vanhasta koodista mutta tarvitset tavallista CSS:ää – nopeaan testiin, sähköpostimallille tai järjestelmälle ilman build-työkaluja – tämä käännös auttaa. Kehykset kuten Bootstrap ja Foundation käyttävät SCSS:ää. Tuotantokäännöksiin Dart Sass ja webpack kääntävät SCSS:ää. Hyödyllinen myös virheenjäljitykseen: näet tarkalleen minkä CSS:n SCSS tuottaa.
Monet kehykset (Bootstrap, Foundation) käyttävät SCSS:ää. Jos muokkaat muuttujia tai irrotat tyylejä, käännös täällä antaa valmiin CSS:n. Olemassa olevan CSS:n muuntamiseen SCSS-rakenteeksi käytä CSS SCSS:ksi -työkalua.
Usein kysyttyä
SCSS vs SASS?
SCSS käyttää aaltosulkeita kuten CSS. SASS käyttää sisennystä (ei aaltosulkeita). Molemmat kääntyvät samaan CSS:ään. Työkalu tukee molempia syntakseja.
Tukeeko @import?
Osittaiset importit eivät välttämättä toimi, jos tiedostoja ei ole ladattu. Monitiedostoprojekteissa käytä build-työkalua kuten Dart Sass tai bundleria. Katso Sass CLI.
Onko datani yksityinen?
Kyllä. Käännös tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Entä mixin ja funktiot?
Mixin ja funktiot laajennetaan käännöksen aikana. Tulos-CSS sisältää ratkaistut arvot. Monimutkaiset funktiot toimivat kääntäjän rajoissa.
Voinko käyttää Bootstrapin kanssa?
Bootstrapin SCSS sisältää paljon osia ja muuttujia. Täyteen Bootstrap-käännökseen käytä virallista buildia tai npm:ää. Työkalu sopii yhden tiedoston SCSS:lle tai koodinpätkille.
Liittyvät työkalut
Sass/SCSS: sass-lang.com ja Sassin dokumentaatio. MDN CSS ja W3C CSS määrittelevät tulostemuodon.