אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » SASS » SASS – קינון ורפרנס

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

רן בר-זיק דצמבר 9, 2012 7:16 am אין תגובות

לימוד הסינטקס של SASS – קינון ורפרנס

»SASS – התקנת סביבת עבודה
»SASS – משתנים
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם על 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. וזה באמת מגניב.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
SASS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד