למד כיצד ניתן לעבוד עם קובצי כלים לעיבוד מקדים של CSS ולבצע באמצעותם קומפילציה ב- Dreamweaver.

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

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

Dreamweaver תומך בכלים לעיבוד מקדים הפופולריים ביותר של CSS:‏ Sass ו-Less ו-Dreamweaver גם תומך במסגרות Compass ו-Bourbon לקומפילציה של קובצי Sass.

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

האופן שבו Dreamweaver מטפל בכלים לעיבוד מקדים של CSS

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

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

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

בעת הגדרת אתר, Dreamweaver גם מאפשר לך להשתמש במסגרות Sass‏ – Compass, ‏Bourbon, ‏Bourbon Neat ו- Bourbon bitters בתוך Dreamweaver.

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

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

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

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

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

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

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

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

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

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

הפעלת קומפילציה אוטומטית בזמן שמירת קובץ

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

אפשרויות Less

Enable Strict Math

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

Enable Strict Units

הצבת אומדן ב-CSS לאחר החישוב המתמטי. לדוגמה, הביטוי 5px * 2px עובר קומפילציה כ- 10px, ולא כ- 10px2. 

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

בדוגמה זו, ה- CSS נוצר באופן הבא:

.class {
  property: 1px * 2px;
}

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

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

Rewrite URLs as Relative URLs

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

יצירת מפת מקור

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

אפשרויות Sass/SCSS

Output File Style

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

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

Create Source Comments

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

יצירת מפת מקור

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

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

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

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

תוכל לקבוע את ההגדרות הבאות עבור הכלי לעיבוד מקדים של CSS והפלט בתיבת הדו-שיח Sites >‏ Manage Sites.

פלט CSS

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

באותה תיקייה כמו המקור

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

הגדרת תיקיית פלט

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

החלפה של מקטע של נתיב קלט

אפשרות זו מאפשרת לך להחליף חלק של הנתיב באמצעות המחרוזות From ו- To.

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

תיקיית המקור

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

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

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

Compas הוא מסגרת קוד פתוח עבור CSS Authoring המאפשר ליצור גיליונות סגנונות CSS3 באמצעות Sass.

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

  1. התקנת קובצי Compass.

    אם עדיין לא מותקן אצלך Compass, באפשרותך להתקין אותו מתוך Dreamweaver.

    בתיבת הדו-שיח Site Setup, בחר Compass >‏ Preprocessors CSS. בחר Use Compass ולאחר מכן לחץ על Install Files.

    התקנת קובצי Compass
    התקנת קובצי Compass

    כל קובצי Compass והקובץ ‎.rb config* מותקנים בתיקיית האתר שלך וניתן לראות אותם בחלונית Files.

    קובצי Compass מותקנים
    קובצי Compass מותקנים

  2. ציון קובץ תצורה מבוסס-Ruby קיים

    אם כבר יש לך Compass במחשב, וקובץ ‎.rb* מוגדר של Compass, מתוך תיבת הדו-שיח Site Setup של Dreamweaver, ציין את הנתיב לקובץ ‎.rb* של Compass בתיקיית השורש של האתר הנוכחי.

    1. בתיבת הדו-שיח Site Setup, בחר Compass < Preprocessors CSS.
    2. בחר את תיבת הסימון Use Compass.
    3. לחץ על Specifying Ruby-based configuration file ודפדף למיקום הקובץ. לחץ על Save כשתסיים.
    ציון קובץ תצורה מבוסס-Ruby קיים
    ציון קובץ תצורה מבוסס-Ruby קיים

    הערה:

    קובץ זה חייב להיות ממוקם בתיקיית השורש של האתר.

  3. ציון אפשרויות תצורה באופן ידני

    אם אין לך אפשרות תצורה קיימת, באפשרותך לבחור לציין אותה באופן ידני.

    1. בתיבת הדו-שיח Site Setup, בחר Compass ‏> Preprocessors CSS.
    2. בחר את תיבת הסימון Use Compass.
    3. לחץ על Specifying Configuration Options manually. ציין את אפשרויות התצורה הבאות ולחץ על Save.

    השדות הבאים יאוכלסו באופן אוטומטי, אך תוכל לשנות אותם בהתאם לדרישות שלך:

    הערה:

    כל הנתיבים שנבחר באפשרויות אלה חייבים להיות בתיקיית השורש של האתר.

    HTTP Path

    הנתיב לפרוייקט בעת הפעל בשרת האינטרנט. ברירות מחדל ל "/".

    Images Directory

    הספרייה שבה התמונות נשמרות. היא יחסית ל- project_path.

    Generated Images Directory

    הספרייה שבה נשמרות התמונות שנוצרו. היא יחסית ל- project_path. ברירות המחדל לערך images_dir.

    Fonts Directory

    הספרייה שבה נשמרים קובצי הגופנים.

    Relative Assets

    מציין אם פונקציות העזרה של Compass צריכות ליצור כתובות URL יחסיות מתוך משאבי CSS שנוצרו באמצעות נתיב http עבור סוג זה של משאב.

  4. אם בחרת באפשרות Enable Auto Compilation on File Save, בתיבת הדו-שיח Sites > Manage Sites > CSS Preprocessors, ‏Dreamweaver מפיק קובץ CSS בכל פעם שאתה שומר שינויים בקובצי Sass שלך. ניתן גם לראות תצוגה מקדימה של שינויים אלה בזמן אמת בחלון הדפדפן. לקבלת מידע נוסף לגבי תצוגה מקדימה של השינויים בזמן אמת בדפדפן, ראה תצוגה מקדימה בזמן אמת.

    אם אינך מעוניין בקומפילציה אוטומטית, תוכל לבצע קומפילציה ידנית של קובץ CSS על-ידי ביצוע אחת מהפעולות הבאות:

    • לחץ לחיצה ימנית על קובץ ה-Sass,‏ Less, או SCSS בחלונית Files ולחץ על Compile.
    • לחץ על Compile < Tools כדי לבצע קומפילציה של הקובץ הנוכחי.
  5. לאחר מכן, ניתן לצרף את קובץ ה-CSS שעבר קומפילציה לקובצי HTML באתר. לקבלת מידע נוסף, ראה קישור לגיליון סגנונות חיצוני של CSS‬.

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

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

התכונות הבאות של Bourbon נתמכות:

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

באפשרותך לייבא מסגרת של Bourbon על-ידי הוספת אחת הפקודות הבאות לקוד שלך:

  • "‎@‎import ‎"bourbon - כדי לייבא Bourbon
  • "‎@‎import ‎"neat – כדי לייבא Bourbon Neat
  • "‎@‎import ‎"bourbon – כדי לייבא Bourbon Bitter

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

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

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

כדי להתקין את Bourbon וכל אחת מתכונותיו:

  1. בתיבת הדו-שיח Site Setup, בחר Bourbon < Preprocessors CSS, או Bourbon Neat או Bourbon Bitters.

  2. לחץ על Install Files כדי להתקין את הקבצים בתוך תיקיית שורש האתר שצוינה.

    ‏‫התקנת קובצי Bourbon‬
    ‏‫התקנת קובצי Bourbon‬

    כל קובצי Bourbon מותקנים בתיקיית האתר שלך וניתן לראות אותם בחלונית Files.

    קובצי Bourbon מותקנים
    קובצי Bourbon מותקנים

    אם יש כשל, השגיאות מוצגות בחלונית Output ‏(Output < Results < Window), והסמל בשורת המצב משתנה לאדום.

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

ניתן לבצע קומפילציה של קובצי הכלי לעיבוד מקדים של CSS באחת מהדרכים הבאים:

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

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

  1. בתיבת הדו-שיח Site Setup, בחר General < Preprocessors CSS > ‏Enable Auto Compilation on File Save.

    הפעלת קומפילציה אוטומטית
    הפעלת קומפילציה אוטומטית

  2. בתיבת הדו-שיח Site Setup, בחר Source & Output ‏> Preprocessors CSS.

  3. בתיבת הדו-שיח Source & Output, ציין את המיקומים שבהם ברצונך לשמור את קובצי ה- CSS שנוצרו. תוכל לבחור אחת מהאפשרויות הבאות:

    באותה תיקייה כמו המקור

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

    הגדרת תיקיית פלט

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

    החלפה של מקטע של נתיב קלט

    אפשרות זו מאפשרת לך להחליף חלק של הנתיב באמצעות המחרוזות From ו- To.

  4. ציין את התיקייה המכילה את קובצי ה- Sass או Less שבהם Dreamweaver צריך "לצפות".

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

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

    הערה:

    Dreamweaver צופה בקבצים אתה ומבצע בהם קומפילציה גם עם תערוך שינויים מחוץ ל- Dreamweaver (לדוגמה, באמצעות עורך טקסט).

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

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

הערה:

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

בנוסף, כאשר סמל המצב אדום ניתן להציג ולהסתיר באמצעותו את החלונית Output.

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

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

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

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

בתרחישים כאלה, השבת את האפשרות Enable Auto Compilation on File Save בחלונית General < Preprocessors CSS של תיבת הדו-שיח Site Setup.

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

ביצוע קומפילציה באופן ידני בקובצי הכלי לעיבוד מקדים של CSS באמצעות החלונית Files
ביצוע קומפילציה באופן ידני בקובצי הכלי לעיבוד מקדים של CSS באמצעות החלונית Files

ניתן גם ללחוץ Compile < Tools כדי לבצע קומפילציה של הקובץ הנוכחי.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת