SCSS és Sass Fordító

Fordítsa le a beillesztett SCSS/Sass kódrészleteket vagy helyi .scss/.sass fájlokat közvetlenül a böngészőben. A stíluslap nincs feltöltve, naplózva vagy elküldve API-nak.

Kattintson egy SCSS/Sass fájl kiválasztásához, vagy dobja ide

A SCSS/Sass közvetlenül az alábbi szerkesztőbe is beilleszthető.

0 bájt

0 bájt

Kész

Böngésző-natív összeállítás

A fordítás helyileg fut a hivatalos Dart Sass implementációval. Nem küldenek stíluslapokat a Convertr szerverekre.

Részlet- és fájlbevitel

Illesszen be részleges SCSS, teljes stíluslapokat, beágyazott szabályokat, változókat, mixineket, vagy töltsön be egy helyi .scss fájlt.

Biztonságos mérés

Az Analytics csak méret- és csökkentési csoportokat használ. SCSS forrás, változók, mixinek és fájlnevek nem vonatkoznak a telemetriára.

Gyakran ismételt kérdések

Fel van töltve az SCSS a Convertr-re?

Nem. A SCSS-fordító helyileg fut a böngésző JavaScriptjével. A beillesztett SCSS és a kiválasztott fájlok nem kerülnek elküldésre a Convertr szervereire.

Mi történik, ha a SCSS szintaktikai hibát észlel?

A fordítói hiba sor- és oszlopszámmal megjelenik a figyelmeztető panelen, így megtalálhatja és kijavíthatja a hibát.

Támogatja a @import vagy a távoli függőségeket?

Nem. A sebesség, az offline elérhetőség és az adatvédelem biztosítása érdekében a távoli importálás és a fájlrendszerhez való hozzáférés le van tiltva ebben a böngésző-natív fordítóban.

Kapcsolódó fejlesztői eszközök

CSS-tömörítő CSS stíluslapok tömörítése CSS Színkonvertáló CSS színek konvertálása CSS-gradiens generátor CSS-gradiensek létrehozása helyben HTML-tömörítő HTML töredékek tömörítése JavaScript tömörítő Tömörítse a JavaScript kódot Fejlesztői Eszközök Tallózás a böngésző segédprogramjai között

SCSS Fordító

A támogatott SCSS szintaxis CSS-be történő fordításának összeállítása a csomagolt böngészőfordító segítségével.

Bemenet
SCSS forrás plusz kimeneti stílus opciók.
Kimenet
CSS vagy kompilátor diagnosztika.
Valódi korlátozások
A böngésző-kompilátor nem oldja meg a projekt önkényes importjait, végrehajtja az építő plug-ineket, vagy garantálja a pártatlanságot egy másik Sass verzióval.
Adatvédelem és adatkezelés
Az SCSS forrás plusz kimeneti stílus opciók feldolgozása ebben a böngészőlapon történik. A Convertr nem kapja meg vagy tárolja; az oldal bezárása vagy újratöltése törli a munkafolyamatot, kivéve, ha az eszköz kifejezetten helyi letöltést kínál.

Hogyan használjuk ezt az eszközt

  1. Adja meg a SCSS forrást és a kimeneti stílus opcióit az eszköz vezérlőiben.
  2. Válassza ki a lefordított CSS-t vagy a fordító diagnosztikáját befolyásoló beállításokat, majd futtassa az eszközt.
  3. Tekintse át a lefordított CSS-t vagy a fordító diagnosztikáját másolás vagy letöltés előtt.

Gyakori hibák

A nem definiált változók, hiányzó mixinek, nem elérhető importok vagy érvénytelen egymásba ágyazás sorfüggő fordítási hibát ad vissza.

Gyakorlati példa

Összeállítsa a $brand változó és a .button hover szabályt kiterjesztett vagy tömörített CSS-be.