CSS SCSS & PUG

[החיים היפים!!]

אשמח לשמוע מה זה HTML(pug)
ומה זה CSS(scss)
ואיך משתמשים בזה?
כלומר מה התגית?
כי את הקוד כבר יש לי....
תודה!!

 

[ש.ב.ח.]

אשמח לשמוע מה זה HTML(pug)

זה מנוע תבנית
כותבים את שלד ההטמל בקיצור והוא מייצר קובץ html תיקני (אפשר לנסות את זה בcodepen)

Pug HTML Template Engine: A Beginner's Guide — SitePoint

Pug is a preprocessor that speeds up writing HTML. Learn the syntax and features by building a simple Node project with Pug.

www.sitepoint.com

ומה זה CSS(scss)

שפת תכנות שמייצרת קבצי css (ע"י קומפיילר)
לא כותבים קוד פעמיים
משתמשים בפונקציות אוטו' וכו'

כלומר מה התגית?
כי את הקוד כבר יש לי....
תודה!!

אם קראת את מה שכתבתי קודם ועדיין השאלה בעינה אשמח להסבר.

 

[החיים היפים!!]

הבנתי שPUG מונע תגיות ובמקום
<li> אני אכתוב .li
כשכתבתי את זה בקוד זה לא מציג לי משהו בדפדפן
הוא פשוט כותב לי את כל הקוד
וגם אני לא מקבלת עיצוב(כי זה לא CSS)
השאלה שלי אם צריך להתקין משהו/לפתוח עמוד מיוחד ולא דף רגיל....
תודה!!!

 

[ש.ב.ח.]

השאלה שלי אם צריך להתקין משהו/לפתוח עמוד מיוחד ולא דף רגיל....

ברור, יש צורך להתקין סביבת עבודה מתאימה לכל אחת מהנ"ל
חפשו ברשת

 

[החיים היפים!!]

אני עובדת בVS(סביבת עבודה)
לSCSS פתחתי דף מתאים(שהסיומת שלו SCSS)
ולא מצאתי כלום בשביל HTML Pug
אשמח לעזרה בעניין....
תודה!!

 

[עילום]

ולא מצאתי כלום בשביל HTML Pug

חפשו בExtensions את המילה PUG ותמצאו המון תוספים
לדוגמה

Pug (Jade) snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Pug and Jade snippets for Visual Studio Code

marketplace.visualstudio.com

Sass/Less/Typescript/Jade/Pug Compile-Superhero - Visual Studio Marketplace

Extension for Visual Studio Code - Really easy to compile ts, tsx, scss, less, jade, pug and es6+ on save, without using a build task.

marketplace.visualstudio.com

או להתקין את הCLI כמו בהדרכה שבקישור שהביא @ש.ב.ח.

אם הבנתי נכון יש לשמור את הקובץ בסיומת .pug
והיא ממירה לHTML רגיל
המון הצלחה