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

1. הבעיות ב CSS וקצת על Sass

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

הבעיה עם CSS:

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

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

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

2. אפשר דוגמא?

בטח. נניח שבכל האתר יש לי צבע ראשי שערכו #5894A8 וצבע משני שערכו #A86C58, עם גליון עיצוב שנראה כך:

body {
  background: #A86C58;
}

h1,h2 {
  color: #104A5D;
}

p:hover {
  background: #104A5D;
  color: #A86C58;
}

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

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

3. אוקיי ואיך Sass יעזור כאן

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

קודפן מאפשר לנו להמיר קוד Sass לקוד CSS אונליין ובאופן מיידי. מוזמנים ללחוץ על כפתור ״View Compiles״ כדי לראות את קוד ה CSS שהדפדפן קורא.

4. Sass והפרויקט שלכם

העבודה עם Sass בפרויקט אמיתי כמעט לא דורשת מחשבה מעבר להגדרה ראשונית של בניית הפרויקט בסביבת הפיתוח. באותה הגדרה ראשונית תבחרו שבכל פעם שאתם עורכים קובץ עם סיומת scss הוא יקומפל מיד לקובץ ה CSS המתאים לו. רוב כלי הפיתוח בעולם ה Web כבר תומכים בשיטה.

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

בינתיים מוזמנים לשחק עם Sass בלי להתקין כלום אונליין באתר:
http://sassmeister.com/

להתקין את תוכנת Koala שממירה קבצי Scss ל CSS רגיל על המחשב שלכם:
http://koala-app.com/

ולקרוא עוד על השפה בעמוד התיעוד:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html