שימוש בכלים לעיבוד מקדים של CSS ב-Dreamweaver

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

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

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

Dreamweaver משתמש במהדר מובנה של Ruby-Saas להידור קובצי SCSS,‏ ‎LESS. Dreamweaver תומך גם במסגרות Compass ו-Bourbon לקומפילציה של קבצי Sass. 

LESS מבוסס על JavaScript בעוד ש-Sass מבוסס על Ruby. עם זאת, לא תצטרך לדעת דבר על אף אחת משפות אלה. וגם לא תצטרך להשתמש בשורת הפקודה כדי לבצע הידור של הקבצים ל-CSS. Dreamweaver מקמפל אוטומטית את הקבצים האלה ל-CSS באמצעות ספרייה JavaScript עם השם less.js, כאשר אתם טוענים, עורכים או שומרים את הקבצים האלה.

גרסאות נתמכות:

• Sass:‏ 3.4.25
• LESS:‏ 2.7.2
• Compass:‏ 1.0.3
• Bourbon:‏ 4.2.6
• Bourbon Neat:‏ 1.7.3
• Bourbon Bitters:‏ 1.2.0

כיצד Dreamweaver מטפל בכלים לעיבוד מקדים של CSS

האופן שבו Dreamweaver מטפל בכלים לעיבוד מקדים של CSS משתנה בהתאם לשאלה אם הגדרת את האתר או לא. אם אתם מגדירים אתר, תוכלו להגדיר העדפות מעבד קדם CSS וגם להשתמש במסגרות Compass ו-Bourbon מתוך Dreamweaver.

בהגדרת אתר ניתן להתאים אישית את האופן שבו כלים לעיבוד מקדים של CSS‬ עובדים בתוך Dreamweaver על-ידי הגדרת העדפות ספציפיות לאתר לכלי לעיבוד מקדים של CSS‬. הגדרת העדפות ספציפיות לאתר לכלי לעיבוד מקדים של CSS מאפשרת לציין אפשרויות קומפילציה על בסיס האתר. תוכלו גם להתאים אישית את המיקום של קבצי Sass ו-CSS ואפשרויות מעבד קדם ספציפיות לכל אתר.

קראו הלאה כדי ללמוד כיצד להשתמש ב-Dreamweaver עם מעבדי קדם של CSS:

Dreamweaver 2017 וכלים לעיבוד מקדים של CSS

ב-Dreamweaver 2017, התמיכה לעיבוד מקדים של CSS מוכללת ב-Dreamweaver. כלומר, ניתן לעבוד עם קובצי Sass‏/LESS‏/SCSS בתוך Dreamweaver. לחיצה פשוטה על Ctrl+S או Cmd+S מאפשרת לך לבצע הידור אוטומטי ל-CSS ב-Dreamweaver. ניתן גם לבצע הידור ידני לכל קובץ CSS באמצעות Tools > Compile (או F9). השינויים משתקפים גם בכל קבצי ה-HTML הפתוחים שבהם ה-CSS המקומפל הזה מקושר או מצורף.

הנה תהליכי עבודה ברמה גבוהה של המשימות הכרוכות בשימוש במעבדי קדם של CSS:

• התקן את המהדר המתאים אם ברצונך להשתמש ב-Compass או Bourbon מתוך Dreamweaver. ההתקנה היא תהליך של לחיצה אחת. הגדירו את הגדרות מעבד הקדם CSS שלכם.

התקן את המהדר רק אם ברצונך להעתיק קובצי מסגרת (Bourbon) או אם ברצונך ליצור קובצי scss ברירת מחדל וקובצי תצורה מבוססי Ruby‏ (Compass). מומלץ לשמור עותק של קובצי המסגרת. אם מיקסינים או פונקציות מסוימות ממסגרת הכתיבה מוסרים ברוויזיות מאוחרות יותר, עדיין תוכלו לגשת לקבצי מעבד הקדם בתוך האתר שלכם.

• ודא שההידור האוטומטי מופעל. אז לחצו על שמירה כדי לעדכן את קבצי ה-CSS.
• (אופציונלי) צפו בשינויים שמשתקפים בתצוגה חיה או בתצוגה מקדימה בזמן אמת בכל דפי ה-HTML שבהם נעשה שימוש ב-CSS שנוצר.

Dreamweaver 2015 וכלים לעיבוד מקדים של CSS

ב-Dreamweaver 2015 ובגרסאות מוקדמות יותר של CC ניתן להשתמש בקובצי Sass,‏ LESS ו-SCSS בתוך Dreamweaver. עם זאת, היה עליכם לקמפל את הקבצים האלה בעצמכם מחוץ ליישום Dreamweaver.
תהליכי העבודה שלכם היו נראים כמו השלבים הבאים:

1. הורידו והתקינו מהדר.
2. הגדירו תפקיד grunt (Gruntfile.js) עבור המהדר כדי שיקרא את קובץ ה-Sass/LESS/SCSS שלכם.
3. הגדירו תפקיד grunt נוסף כדי להדר את הקובץ ל-CSS, שאותו תביאו אחר כך ל-Dreamweaver.

עליכם לבצע את השלבים הללו בכל פעם שאתם מבצעים שינוי בקובץ ה-Sass/LESS/SCSS שלכם.

אם אין לך אתר מוגדר, תוכל לבצע הידור ידני של קובצי Sass ו-LESS. עם זאת, תמיכה במסגרות Compass and Bourbon frameworks אינה קיימת.

כיצד להשתמש בכלים לעיבוד מקדים של CSS ב-Dreamweaver?

הנה תהליכי העבודה ברמה גבוהה של המשימות הכרוכות בשימוש ב-CSS preprocessors:

1. הגדרת אתר ב-Dreamweaver. ודא שקובץ ה-Sass או ה-LESS שאתה מנסה לבצע בו הידור נכלל בתיקיית הבסיס של האתר. אם כבר הגדרת אתר וקובצי Sass‏/LESS נכללים בתיקיית הבסיס של האתר, המשך לשלב הבא. למידע נוסף על הגדרת אתר Dreamweaver, ראו אודות אתרי Dreamweaver.
2. הגדר העדפות עבור כלים לעיבוד מקדים של CSS (כגון המיקום של קובצי CSS שנוצר). העדפות אלה ספציפיות לאתר. למידע נוסף, ראו הגדרת העדפות CSS preprocessor ספציפיות לאתר.
3. אם ברצונך להשתמש במסגרות ספציפיות, כגון Compass או Bourbon, ניתן לציין את ההגדרות עבור מסגרות אלה. למידע נוסף, ראו: שימוש במסגרת Compass או שימוש במסגרת Bourbon.
4. הגדר הידור אוטומטי או בצע הידור ידני של קובצי Sass שלך ו-LESS. למידע נוסף, ראו הידור קבצי CSS preprocessor.

הגדרת העדפות עבור כלים לעיבוד מקדים של CSS

אתם יכולים להגדיר העדפות ספציפיות לאתר עבור CSS preprocessors באמצעות תיבת הדו-שיח אתרים > ניהול אתרים.

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

קביעת הגדרות כלליות לכלי לעיבוד מקדים כללי CSS

תוכל לקבוע את ההגדרות הכלליות הבאות עבור כלים לעיבוד מקדים של CSS בתיבת הדו-שיח Sites > Manage Sites > CSS Preprocessors. כברירת מחדל, ההגדרות הללו חלות על מסגרת Saas.

בחר תיבת סימון זו כדי להפעיל את הקומפילציה האוטומטית של הכלים לעיבוד מקדים של CSS. אם תבחר באפשרות זו, Dreamweaver יפיק באופן אוטומטי קובץ CSS בעת שמירת קובץ ה-Sass, ‏LESS או SCSS. אם האפשרות הזו נשארת לא מסומנת, עליכם להדר את הקבצים באופן ידני בכל פעם שאתם מבצעים שינוי.

אפשרויות LESS

רק ביטויים מתמטיים שמוקפים בסוגריים עוברים עיבוד. לדוגמה, הביטוי (100px/25px) מעובד בהצלחה, אך הביטוי 20% + 10% (ללא סוגריים) אינו מעובד. כשהאפשרות הזו מושבתת, כל הביטויים המתמטיים בקובץ מעובדים.

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

.class {

property: 1px * 2px;

}

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

כשיחידות מחמירות מופעלות, Dreamweaver מניח שזו שגיאת חישוב, ומציג שגיאה.

האפשרות הזו מאפשרת לכם לכתוב מחדש URLs בקובץ ה-CSS שנוצר כך שה-URLs יהיו תמיד יחסיים לקובץ שנוצר. 

אפשרות זו יוצרת מפת מקור. מפת מקור היא קובץ שמגשר על הפער בין שפות ברמה גבוהה כמו Sass ו-LESS, ובין השפה ברמה הנמוכה שאליה הן מהדרות, כמו CSS.

אפשרויות Sass/SCSS

מציין את הסגנון של קובץ פלט ה-CSS:

• מקונן - מעצב את ה-CSS המהודר במבנה המוכר והמודולרי.
• דחוס - מעצב את ה-CSS המקומפל במבנה דחוס שתופס פחות מקום מ-Nested או Expanded.
• דחוס - מייצא את ה-CSS במבנה שטוח.
• Expanded -קובץ הפלט של ה- CSS הוא בצורה מורחבת כאשר כל מאפיין וכלל תופסים שורה אחת. המאפיינים מוזחים בתוך הכללים, אבל הכללים אינם מוזחים בשום צורה. 

יוצר הערות בקובץ ה-CSS הפלט שממפות את קוד ה-CSS לשורה ממנה הוא נוצר.

יוצר מפת מקור (קובץ שמגשר בין שפות ברמה גבוהה כמו Sass ו-LESS, לבין השפה ברמה נמוכה שאליה הן מקומפלות, כמו CSS). 

הגדרת העדפות מקור ופלט עבור CSS

תוכלו להגדיר היכן יש למקם את קבצי ה-CSS שנוצרים, ואת הנתיב ש-Dreamweaver צריך לצפות בו ולהפעיל קומפילציה אוטומטית כאשר קובץ Sass/LESS בנתיב משתנה באמצעות עורך חיצוני.

ניתן להגדיר את הגדרות מעבד ה-CSS המוקדם עבור קובצי המקור והפלט בתיבת הדו־שיח Sites > נהל אתרים.

פלט CSS

ציינו את המיקום של קובץ יציאת ה-CSS שנוצר.

בחרו באפשרות זו אם אתם רוצים שקבצי ה-CSS שנוצרים יישמרו באותה תיקייה כמו קבצי המקור Sass ו-LESS.

בחרו באפשרות זו וציינו תיקייה שבה אתם רוצים לשמור את קבצי ה-CSS שנוצרים.

אפשרות זו מאפשרת לך להחליף חלק של הנתיב באמצעות המחרוזות From ו-To. לדוגמה, בהגדרת מ: scss אל: css, קובץ הפלט ממוקם בתוך אותו מבנה עץ לאחר החלפת SCSS בנתיב css.

ציין את תיקיית המשנה בתוך בסיס האתר שיש לצפות בה. בדרך כלל, תת-תיקייה זו מכילה את כל קבצי ה-SCSS או LESS שלכם. 

אם הפעלת את האפשרות Compilation תחת General settings‏ Dreamweaver מפעיל את הכלי לעיבוד מקדים של CSS באופן אוטומטי. Dreamweaver מפעיל קומפילציה אוטומטית כאשר כל קובץ בתוך התיקייה נערך באופן חיצוני או מתוך Dreamweaver.

שימוש במסגרת Compass

Compass הוא מסגרת כתיבת CSS בקוד פתוח שמאפשרת לכם ליצור גיליונות סגנון CSS3 באמצעות Sass.

Dreamweaver מספק תמיכה ב- Compass. אם אתם יוצרים גיליונות סגנון באמצעות Compass, תוכלו לקמפל את גיליונות הסגנון האלה וליצור קבצי CSS מתוך Dreamweaver.

שימוש במסגרת Bourbon

Dreamweaver תומך במשפחת מוצרי Bourbon. אם אתם יוצרים גיליונות סגנונות באמצעות Bourbon, תוכלו לקמפל את הגיליונות האלה וליצור קבצי CSS מתוך Dreamweaver.

הטעמים הבאים של Bourbon נתמכים:

• Bourbon - ספריית מיקסינג פשוטה וקלילה עבור Sass
• Bourbon Neat – מסגרת רשת סמנטית קלילה עבור Sass ו-Bourbon
• Bourbon Bitters - סגנונות פיגום, משתנים ומבנה לפרויקטים של Bourbon

אתם יכולים לייבא את framework של Bourbon על ידי הוספת אחת מהאפשרויות הבאות בקוד שלכם:

• @import "bourbon" - לייבוא Bourbon
• @import "neat" – לייבוא Bourbon Neat
• @import "base" – לייבוא Bourbon Bitter

Dreamweaver משתמש אז בגרסה הארוזה מראש של Bourbon במהלך קימפול קבצי ה-preprocessor.

לחלופין, באפשרותך להתקין את קובצי המסגרת של Bourbon באתר שלך, כך שהעדכונים הבאים של Dreamweaver לא ישפיעו על תהליכי העבודה של הקומפילציה. קובצי המסגרת של Bourbon מועתקים לאתר שלך. Bourbon הוא ה-framework שמשמש כאשר קימפול מופעל עבור כל אחד מהקבצים שמייבאים את ה-framework.

התקנת קבצים מסוג Bourbon, ‏Bourbon Neat, או Bourbon Bitters

כדי להתקין Bourbon או כל אחד מהטעמים שלו:

ביצוע קומפילציה של קובצי הכלי לעיבוד מקדים של CSS

אתם יכולים לקמפל קבצי CSS preprocessor באחת מהדרכים הבאות:

• הגדרת קומפילציה אוטומטית של קובצי הכלי לעיבוד מקדים של CSS
• קמפול ידני של קובץ CSS preprocessor

הגדרת קומפילציה אוטומטית של קובצי הכלי לעיבוד מקדים של CSS

באפשרותך להגדיר אפשרויות בתוך Dreamweaver לביצוע הידור אוטומטי של שינויים שמבוצעים בקובץ Sass או LESS לתוך הקובץ ל-CSS המתאים לו. אתם יכולים גם לציין את המיקומים (בתוך שורש האתר) שבהם אתם רוצים לשמור את ה-CSS הנוצר.

לאחר קימפול מוצלח, הודעה מוצגת בלוח Output (Window > Results > Output).אייקון הסטטוס בשורת הסטטוס מוצג בירוק.כדי לפתוח את קובץ ה-CSS המהודר, לחצו לחיצה כפולה על הודעת ההצלחה בלוח.

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

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

למידע נוסף על קישור דף האינטרנט שלכם לגיליון הסגנונות, ראו Link to an external CSS style sheet.

קומפילציה ידנית של קובץ CSS Preprocessors

במצבים מסוימים (למשל אם לא הגדרתם אתר Dreamweaver), ייתכן שתרצו לקמפל ידנית קובץ מעבד CSS.

במצבים כאלה, השביתו את Enable Auto Compilation on File Save בלוח CSS Preprocessors > General של תיבת הדו-שיח Site Setup.

כדי לקמפל ידנית מעבד CSS, לחצו לחיצה ימנית על הקובץ בלוח Files, ולחצו על Compile.

אפשר גם ללחוץ על Tools > Compile כדי לקמפל את הקובץ הנוכחי.