Sass-ból CSS
Sass és SCSS fordítása CSS-re online. Valós idejű átalakítás kibővített vagy tömörített kimenettel, hibasor-jelzéssel, teljes változó-, mixin- és beágyazás-támogatással.
Mi a különbség a Sass és az SCSS között?
Az SCSS az újabb, CSS-szerű szintaxis kapcsos zárójelekkel és pontosvesszőkkel. A Sass (a behúzott szintaxis) behúzást és újsort használ. Ez az eszköz mindkettőt fordítja - csak válaszd ki a szintaxist a legördülőben.
Melyik Sass-funkciók támogatottak?
A fordító a hivatalos Dart Sass motort használja, így a változók, a beágyazás, a mixinok, az @include, a függvények, a @use, az @extend, az @if és @each vezérlőutasítások, valamint a tömörített kimeneti stílus is támogatott.
Hogyan kapjak tömörített CSS-t?
Fordítás előtt állítsd a kimeneti stílus legördülőt Tömörítettre. A szóközök és az utolsó pontosvessző eltávolításra kerül, így a lehető legkisebb stíluslap készül.
Miért mutat sorszámot a hiba?
Ha a kód szintaktikai hibát tartalmaz, a Sass motor a hiba pontos sorát és oszlopát jelenti, az eszköz pedig a kimenet fölött jeleníti meg a gyors javításhoz.
A Sass-kódom szerverre kerül?
Nem. A teljes Dart Sass motor az oldalba van csomagolva, és a böngészőben fordít helyben. A stíluslapjaid soha nem hagyják el az eszközt - privát projektekhez is biztonságos.
Fordíthatok helyi fájlok @importját?
Nem. A fordító a memóriában lévő egyetlen kódrészlettel dolgozik, és nem fér hozzá a fájlrendszeredhez, ezért a fájlorientált importokat és a külső partialok @use-ját nem tudja feloldani.
Offline is működik?
Igen. Ha az oldal és a fordítócsomag egyszer betöltött, a fordítás teljes egészében a gépeden történik, kapcsolat nélkül.
Hogyan használd az eredményt?
Másold a vágólapra a lefordított CSS-t, vagy töltsd le style.css néven a kimenet alatti gombokkal, majd hivatkozd a HTML-ben, vagy illeszd a projekt stíluslapjába.
A(z) Sass-ból CSS használata
Ez a fordító a hivatalos Dart Sass motort futtatja teljes egészében a böngésződben. Illessz be SCSS-t vagy behúzott Sass-t, és azonnal tiszta CSS-t kapsz — változók, mixin-ek, egymásba ágyazás és függvények támogatottak, semmi nem töltődik fel.
- Illeszd be a Sass- vagy SCSS-kódodat a beviteli mezőbe, vagy nyomd meg a Példa gombot egy változót és mixin-t tartalmazó, működő demó betöltéséhez.
- A legördülő menükben válaszd ki a szintaxist (SCSS vagy behúzott Sass) és a kimeneti stílust (Expanded vagy Compressed).
- Élő fordítás mellett gépelés közben készül el a CSS; különben a Fordítás gombbal indíthatod kézzel.
- Szintaxis hibánál a pontos sorszám és az üzenet a kimenet felett jelenik meg, hogy gyorsan javíthass.
- A kimenet alatti Másolás vagy Letöltés gombbal viheted el a lefordított stíluslapot style.css néven.
A Compressed kimeneti stílussal minifikálhatod a stíluslapot — ideális produkciós buildhez közvetlenül a forrásból.
Kapcsolódó eszközök
- CSS szépítő CSS kód azonnali formázása és szépítése. Minimalizált CSS átalakítása olvasható kóddá testreszabható beállításokkal.
- CSS Minimalizáló Ingyenes online CSS minimalizáló. Azonnal tömörítse és optimalizálja CSS kódját a szóközök, megjegyzések és felesleges karakterek eltávolításával. Csökkentse a fájlméretet a gyorsabb webteljesítményért.
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- CSS Flexbox generátor Vizuális CSS Flexbox generátor élő előnézettel. Állítsa be a flex tulajdonságokat és kapjon azonnal használható CSS kódot.
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- HTTP Kérés Tesztelő Tesztelje a REST API-kat közvetlenül a böngészőben. Küldjön GET, POST, PUT, DELETE kéréseket egyedi fejlécekkel, törzzsel és paraméterekkel. Azonnal láthatja a válasz állapotát, fejléceit és JSON törzsét.
- .htaccess generátor Apache .htaccess szabályok generálása átirányításokhoz, újraírásokhoz, biztonsági fejlécekhez, gyorsítótárazáshoz és egyebekhez.