עריכת CSS שלך עיצובים בדפדפן עם CSS ג 'ורג'

האם אי פעם רצית לבצע עריכה ישירה בדפדפן שלך מבלי לחזור לקובצי ה- CSS שלך? פתרון אחד הוא Chrome Developer Tools אך כמה מפתחים מעדיפים זרימת עבודה פשוטה יותר.

זה המקום ג 'ורג' מגיע. זה חינם כלי עריכה בדפדפן עובד על גבי LESS והיא יוזמת על ידי פשוט קובץ.

רוב המפתחים מעדיפים עורך מבוסס דפדפן שכן לא כולם משתמשים precompiler LESS. אבל קס ג'ורג ' פועל על סביבת LESS אשר ניתן להתקין במהירות באמצעות npm.

אם יש לך npm מותקן אז אתה יכול להפעיל את הקוד הזה פשוט הוסף את קבצי המקור לפרויקט הנוכחי שלך:

 התקנת npm - save-dev css-george 

או שאתה יכול תמשוך את ג 'ורג' קובץ מ GitHub שבו הוא מתארח לצד כל קבצי המקור האחרים. הפרויקט כולו הוא חופשי וקוד פתוח, כך שתוכל הורד עותק מלא מ GitHub אם אתה לא רוצה להשתמש npm.

עם ה .י קובץ נוסף לכותרת האתר שלך, אתה יכול להתחיל ביצוע פונקציות ג 'ורג' ישירות מהדפדפן. ל פתח את חלון העריכה, לחץ על מקש tilde אשר נגיש מתוך Shift + 'הממוקם בפינה השמאלית העליונה של רוב הקלידים. א חלון חדש אמור להיראות כך:

ממסך זה, אתה יכול לערוך את המשתנים LESS המשמש לכל דבר, החל צבעים לגדלים גופן או משפחות גופן.

זה המקום שבו תוסף LESS הופך הכרחי כי אתה צריך לספר CSS ג'ורג ' אילו משתנים לכלול. ברגע שהם מוכנים, אתה יכול פשוט לפתוח את עורך הדפדפן CSS ג 'ורג' וללכת העירה.

אני מקווה שזה ברור כי כלי זה לא צריך כלול בזמן ריצה. אלא אם אתה דווקא רוצה לתת למבקרים לערוך את צבע הדף ואת הסגנון, אשר בדרך כלל לא רעיון טוב. אלא בשביל בדיקות מקומיות, CSS ג'ורג 'הוא כלי נדיר שמציע כלי עזר לכל מפתחי הממשק.

אתה יכול לראות את זה לחיות בדף הדגמה של CSS George, או הורד עותק מלא באמצעות npm או מתוך ריפו GitHub.