A CSS-tervek szerkesztése a böngészőben a CSS George segítségével

Valaha akartál végezzen közvetlen szerkesztést a böngészőben anélkül, hogy visszaállnánk a CSS fájljaira? Az egyik megoldás a Chrome Developer Tools, de néhány fejlesztő előnyben részesíti az egyszerűbb munkafolyamatot.

Ahol CSS George Ez ingyenes böngésző szerkesztőeszköz művek a LESS tetején és az a egyszerű JavaScript fájl.

A legtöbb fejlesztő inkább a böngésző alapú szerkesztő mivel nem mindenki használja a LESS előtelepítőt. De CSS George a LESS környezetben fut gyorsan telepíthető npm-en keresztül.

Ha npm telepítve van, akkor ezt az egyszerű kódot futtathatja adja meg a forrásfájlokat a jelenlegi projekthez:

 npm telepítés --save-dev css-george 

Vagy tudsz húzza a George.js fájl a GitHub-tól, ahol az összes többi forrásfájl mellett található. Az egész projekt szabad és nyílt forráskódú, így lehet töltse le a teljes példányt GitHub-tól, ha nem akarja használni az npm-et.

A ... val .js a webhely fejlécéhez hozzáadott fájl indítható George funkciók végrehajtása közvetlenül a böngészőből. Nak nek nyissa meg a szerkesztőablakot, kattintson a tilde-kulcsra, amely a legtöbb billentyűzet bal felső sarkában található Shift + -ból érhető el. A új ablak úgy tűnik, hogy ilyesmi néz ki:

Ezen a képernyőn lehet módosítsa a LESS változókat a színektől a betűméretekig vagy a betűtípuscsaládokig használják.

Itt a LESS plugin szükségessé válik mert meg kell mondanod CSS George-nak mely változókat kell figyelembe venni. Miután létrehozták, meg tudod csinálni nyissa meg a CSS George böngészőszerkesztőjét és menj a városba.

Remélem, nyilvánvaló, hogy ez az eszköz nem kellene a futásidőben. Hacsak kifejezetten nem kívánja látogatókat hagyni szerkessze az oldal színét és stílusát, ami általában nem jó ötlet. De érte helyi tesztelés, A CSS George egy ritka eszköz, amely minden frontend fejlesztő számára hasznos.

tudsz látni élni a CSS George demóoldalán, vagy töltse le a teljes példányt npm vagy a GitHub repo segítségével.