Sass CSS:ksi
Käännä Sass ja SCSS CSS:ksi verkossa. Reaaliaikainen muunnos laajennetulla tai pakatulla tulosteella, virherivinumeroilla ja täysi tuki muuttujille, mixineille ja sisäkkäisyydelle.
Mikä on Sassin ja SCSS:n ero?
SCSS on uudempi, CSS-mainen syntaksi, joka käyttää aaltosulkeita ja puolipisteitä. Sass (sisennetty syntaksi) käyttää sisennystä ja rivinvaihtoja. Tämä työkalu kääntää molemmat - valitse vain syntaksi alasvetovalikosta.
Mitkä Sass-ominaisuudet ovat tuettuja?
Kääntäjä käyttää virallista Dart Sass -moottoria, joten muuttujat, sisäkkäisyys, mixinit, @include, funktiot, @use, @extend, ohjausdirektiivit kuten @if ja @each sekä pakattu tulostustyyli ovat kaikki tuettuja.
Miten saan pakatun CSS:n?
Aseta tulostustyyli-valikoksi Pakattu ennen kääntämistä. Välilyönnit ja viimeinen puolipiste poistetaan, jolloin saadaan mahdollisimman pieni tyylisivu.
Miksi virhe näyttää rivinumeron?
Kun koodissasi on syntaksivirhe, Dart Sass -moottori ilmoittaa tarkan rivin ja sarakkeen, jossa jäsennys epäonnistui, ja työkalu näyttää sen tulosteen yllä nopeaa korjausta varten.
Ladataanko Sass-koodini palvelimelle?
Ei. Koko Dart Sass -moottori tulee sivun mukana ja kääntää paikallisesti selaimessa. Tyylisivusi eivät koskaan lähde laitteeltasi - turvallista myös yksityisille projekteille.
Voinko kääntää paikallisten tiedostojen @importin?
Ei. Kääntäjä työskentelee yhden muistissa olevan koodinpätkän kanssa eikä käytä tiedostojärjestelmääsi, joten tiedostopohjaisia importteja ja ulkoisten partialien @use:a ei voi ratkaista.
Toimiiko se offline-tilassa?
Kyllä. Kun sivu ja kääntäjäpaketti on ladattu kertaalleen, kääntäminen tapahtuu kokonaan koneellasi ilman verkkoyhteyttä.
Miten käytän tulosta?
Kopioi käännetty CSS leikepöydälle tai lataa se style.css-nimisenä tulosteen alta löytyvillä painikkeilla, ja linkitä se HTML:ään tai liitä projektisi tyylisivuun.
Näin käytät työkalua Sass CSS:ksi
Tämä kääntäjä suorittaa virallisen Dart Sass -moottorin kokonaan selaimessasi. Liitä SCSS tai sisennetty Sass ja saat puhtaan CSS:n heti — muuttujat, mixinien, sisäkkäisyyden ja funktiot tuettu, mitään ei lähetetä verkkoon.
- Liitä Sass- tai SCSS-koodisi syötekenttään tai paina Esimerkki ladataksesi toimivan demon, jossa on muuttuja ja mixin.
- Valitse pudotusvalikoista syntaksi (SCSS tai sisennetty Sass) ja tulostustyyli (Expanded tai Compressed).
- Live-käännön ollessa päällä CSS syntyy kirjoittaessasi; muuten paina Käännä suorittaaksesi manuaalisesti.
- Syntaksivirheen kohdalla tarkka rivinumero ja viesti näkyvät tulosteen yläpuolella, jotta korjaaminen onnistuu nopeasti.
- Käytä tulosteen alla olevia Kopioi- tai Lataa-painiketta viedäksesi käännetyyn tyylisivun nimellä style.css.
Valitse tulostustyyli Compressed typistääksesi tyylisivun — loistava tuotantobuildeihin suoraan lähteestä.
Aiheeseen liittyvät työkalut
- CSS-kaunistaja Muotoile ja kaunista CSS-koodi välittömästi. Muunna minifioitu CSS luettavaksi koodiksi muokattavilla vaihtoehdoilla.
- CSS-minifioija Ilmainen online CSS-minifioija. Pakkaa ja optimoi CSS-koodi välittömästi poistamalla välilyönnit, kommentit ja tarpeettomat merkit. Pienennä tiedostokokoa nopeampaa web-suorituskykyä varten.
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- CSS Flexbox-generaattori Visuaalinen CSS Flexbox-generaattori live-esikatselulla. Säädä flex-ominaisuuksia ja saa heti käyttövalmis CSS-koodi.
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- HTTP-pyyntö Testaaja Testaa REST API:ja suoraan selaimessasi. Lähetä GET-, POST-, PUT-, DELETE-pyyntöjä mukautetuilla otsikoilla, rungolla ja parametreilla. Näe vastauksen tila, otsikot ja JSON-runko heti.
- .htaccess-generaattori Luo Apache .htaccess-sääntöjä uudelleenohjauksille, uudelleenkirjoituksille, turvallisuusotsikoille, välimuistille ja muulle.