SASS – קינון ורפרנס

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

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

קינון

ראשית, אנו נתחיל מלימוד קינון.

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

#main {
  width: 97%; }
#main p, #main div {
    font-size: 2em;
 }
#main p a, #main div a {
      font-weight: bold;
 }
  #main pre {
    font-size: 3em;
 }

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

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

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

נבהלים? רגע! לא להבהל. צריכים דוגמה נוספת? שימו לב למשל לקינון הפשוט הבא:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

כאן יש לי אלמנט main p# שמכיל בתוכו אלמנט redbox. – זה מתקמפל לדבר הבא:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

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

רפרנס

הרבה פעמים יש לנו ב-CSS חזרות שונות על אותו אלמנט. רואים את זה במיוחד בפסאודו אלמנטים – שוב ושוב אנו כותבים a:hover או a: link. שימו לב למשל לקוד הבא:

#main {
  color: black; }
 #main a {
    font-weight: bold;
}
 #main a:hover {
     color: red; 
}

שוב ושוב אנו חוזרים על עצמנו. ב-SASS יש לי אפשרות להשתמש בסימן & עבור רפרנס. שימו לב לדוגמה:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

כאשר אני כותב את הסימן & בתוך קינון, ה-& הוא רפרנס לאלמנט שבתוכו אני נמצא. במקרה הזה ה-& הוא בעצם ה-a (שבתוכו נמצא בתוך main#).

הנה דוגמה נוספת, כאן יש לי קוד SASS. ה- & משמש אותי בשתי הזדמנויות – הראשונה על מנת ליצור את הפסאודו אלמנט a:hover והשניה על מנת ליצור את ה-class של body.firefox a

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

זה יתקמפל לדבר הבא:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
    text-decoration: underline; 
}
body.firefox a {
    font-weight: normal;
 }

תראו איך הקוד של SASS נראה אלגנטי לעומת המגושמות של קוד ה-CSS שיוצא לנו.

קינון של תכונות

ב-SASS אפשר גם לבצע קינון של תכונות. מה פירוש? יש ב-CSS מושג שנקרא namespace. מה זה? זה פשוט כינוי לכל התכונות המשותפות – למשל:

font-size
font-family
font-weight

ה-namespace של כל התכונות שלהלן הוא font כאשר התכונות הן size, family ו-weight. אני יכול לבצע קינון שלהן. באופן הבא:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

זה יקומפל אל:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

לא צריך להיות חוקר גדול כדי להבין מה קורה פה. במקום לרשום שוב ושוב font-family, font-size ו-font-weight, כתבתי בקובץ ה-SCSS את ה-namespace (במקרה הזה font) ואז ציינתי את כל התכונות. הייתי יכול להוסיף כמובן עוד ועוד.

שימו לב כמה הקוד הזה הוא פשוט ואלגנטי. במאמר הבא נדבר על משתנים ב-SASS. וזה באמת מגניב.