MasterScripter

מCSS לSCSS: הגיע הזמן לעבור ל – SASS

אתם הרי יודעים כבר שהגיע הזמן לשדרג את הCSS שלכם,
ומה יכול לעשות את העבודה טוב יותר מאשר המדריך השלם ל- SASS ו- SCSS?
מכאן תצאו מומחי SASS, וזאת הבטחה!

מCSS ועד SCSS, דרך Sass וLess –  מה קורה פה?

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

CSS Preprocessor – מכאן הכל מתחיל

בשביל להבין מה זה Sass, תחילה צריך ללכת שלב אחד אחורה, ולהסביר מה זה CSS Preprocessor.
התשובה למה זה CSS Preprocessor נמצאת בשם עצמו.
CSS Preprocessor היא בעצם סוג של שפת תכנות המרחיבה את CSS, ומתקמפלת לCSS.
המשמעות היא שלאחר שהקומפיליציה מתבצעת בקוד שכתבנו בCSS Preprocessor אנחנו מקבלים קובץ CSS רגיל ומוכר, אולם הקובץ נוצר ע"י הדברים שכתבנו בCSS Preprocessor.
הכתיבה דומה לCSS, אך מזכירה יותר שפות "תכנותיות" הן בסמנטיקה והן בפיצ'רים שהיא מציעה(שימוש במשתנים, פונקציות, לולאות, ועוד הרבה דברים כיפיים שניגע בהם בהמשך).
CSS Preprocessor זה בעצם שם כללי, ויש מספר סוגים שונים של CSS Preprocessorים, כשהמובילים שביניהם הם: Sass, Less ו- Stylus.
בהמשך (ממש עוד מעט) אני ארחיב על Sass ו- Less, שהם הCSS Preprocessor המובילים והנפוצים בעולם ובישראל בפרט.
בחרתי שלא להרחיב על Stylus מפאת הפופולריות הנמוכה שלו בקרב מתכנתי הWEB הישראליים.

Sass – קצת רקע

SASS זה ראשי תיבות של Syntactically Awesome Style Sheets.
Sass היא למעשה אחת מהCSS Preprocessor המובילים והנפוצים היום, אם לא המובילה והנפוצה ביותר.
השפה עוצבה ופותחה ע"י 3 אנשים – המפטון קטלין, נטלי וייזנבאום, וכריס אפשטיין, ויצאה לאוויר העולם לראשונה בשנת 2006.

תחילה, השפה הייתה חלק מPreprocessor אחר בשם HAML, שעוצב ופותח ע"י מפתחי RUBY, ולכן גם הסמנטיקה בSass הייתה שונה קצת מCSS – לא היו סוגריים מרובעים ולא נקודה פסיק, למשל.
במהלך השנים שעברו והגרסאות החדשות שיצאו, השפה השתדרגה והשתכללה, וגם הסמנטיקה השתנתה על מנת להיות כמה שיותר דומה לCSS – לא בטוח שהשתנתה זו המילה הנכונה, כי למעשה התווספה סוגה חדשה של סמנטיקה, הSCSS. עוד על ההבדלים בין הסמנטיקות (אנשים מסויימים יגידו שאלו ממש שפות שונות), תמצאו אוטוטו בהמשך המדריך.
הגרסא הנוכחית והעדכנית ביותר של Sass היא 3.4.22, שיצאה בסוף מרץ.
מידע נוסף ניתן למצוא באתר של Sass.

SCSS – עוד סוג של Sass?

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

לא לשכוח שלאחר הקימפול אנחנו מקבלים קובץ .css רגיל, ובעצם נשארים עם שני הקבצים – .scss ו.css

Sass VS SCSS

אז מה בעצם ההבדלים בין Sass לSCSS?

הרבה אנשים נוטים לקבל תחושת בלבול בכל הנושא של Sass וSCSS, אז אני אנסה לעשות את זה הכי פשוט שאפשר.

Sass וSCSS אלו שתי שיטות כתיבה שונות, אשר נותנות את אותה תוצאה בסוף.

מעבר להבדל בסיומות הקבצים(.sass ו.scss), ההבדל המשמעותי ביותר הוא הסמנטיקה – בSass הכתיבה דומה יותר לRUBY, ולעומת זאת בSCSS הכתיבה ממש זהה לCSS. לדוגמא:

בSCSS:

בSass:

לאחר הקמפול, נקבל בשני המקרים CSS זהה:

הבדלים נוספים בין השתיים, הם שSCSS מותאם באופן מלא לCSS, דבר שמתבטא בכך שניתן לשנות סיומת של קובץ CSS לSCSS – וזה פשוט יעבוד.

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

מעתה והלאה כשאכתוב SASS דעו שאני מתכוון לשיטת הכתיבה SCSS, שאותה אנחנו הולכים ללמוד היום.

Less – המתחרה הידוע

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

כמו כן, בתחילת הדרך היו לLess גם מספר פיצ'רים שלא היו בSass, אולם בגרסאות האחרונות Sass יישרה קו עם הפיצ'רים החסרים, כמו גם עם הסמנטיקה הדומה לCSS (SCSS).
Less עוצבה ופותחה ע"י אלכסיס סאליבר ודימיטרי פדאייב (סלחו לי אם אני לא מדייק בכתיבת השמות בעברית..),
וגרסתה האחרונה הינה 2.7.1 אשר יצאה בתחילת מאי.
מידע נוסף ניתן למצוא באתר של Less.

Sass VS Less – במי לבחור?

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

  • הרחבות – כמות ואיכות ההרחבות הקיימות לSass משמעותית גדולה וטובה יותר מאשר לLess.
  • ניואנסים – הניואנסים בתוך השפה עצמה, למשל בNESTING ובMIXINS (אתם תבינו מה זה בהמשך..) טובים ויעילים יותר בSass מבLess.
  • דוקיומנטציה – הדוקיומנטציה של Sass אומנם מוצגת בצורה פחות טובה מLess, אבל היא מעמיקה יותר – וזה קריטי, לפחות בעיני, אם כי אני מקבל שלפעמים צורת ההצגה חשובה יותר.

שלא תבינו אותי לא נכון – לLess יש יתרונות, כמו למשל ההתקנה שלה.
בשביל להתקין Sass (גם את זה תלמדו בהמשך..), יש צורך בלהתקין RUBY קודם, ואחר כך להשתמש בTerminal או בCMD.
ההתקנה של Less, שמבוססת על JS, פשוטה הרבה יותר.

ובכל זאת, מעבר לכך שהבחירה הנכונה בעיני היא Sass, המדריך הזה נכתב לSass, אז אם בחרתם Less..אתם בבעיה 🙂

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

למה בכלל כדאי לי להשתמש בזה?

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

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

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

התקנה

אז אחרי כל ההקדמות, הגיע הזמן להתחיל במלאכה, להיכנס לעובי הקורה, ועוד שלל קלישאות שאומרות – יאללה!

לפני שאפשר להתחיל לשחק עם הSass, אנחנו צריכים להתקין אותו.

מה הכוונה? ישנם מספר שלבים שעלינו לעבור על מנת שנוכל לכתוב Sass, לשמור את הקובץ בסיומת SCSS, ולקבל קובץ CSS סקסי כמו שאנחנו רוצים.

שלב 1 – התקנת RUBY

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

משתמשי לינוקס:

כנסו לAPT Package Manager, או לRBENV, או לRVM, והקלידו:

משתמשי ווינדוס:

הורידו והריצו את קובץ ההתקנה של RUBY מכאן.

התקנת RUBY על ווינדוס

משתמשי מאק:

RUBY כבר מותקן לכם על המערכת, אז אני מרשה לכם לעבור לשלב הבא.

שלב 2 – התקנת Sass

פתחו את הTerminal, או הCMD WITH RUBY החדש שלכם,

פתיחת CMD עם RUBY

והריצו את השורה הבאה:

אם נתקלתם בשגיאה (בדרך כלל אצל משתמשי לינוקס), הריצו את השורה הבאה:

התקנת SASS באמצעות RUBY
קאבום! יש לכם Sass על המחשב!

שלב 3 – בדיקה

בשביל לוודא שהSass באמת הותקן כראוי על המחשב, פתחו שוב את הTerminal או הCMD והריצו את השורה הבאה:

אם הכל תקין, אתם אמורים לראות על המסך עכשיו את מס' הגרסא העדכנית שמותקנת על המחשב (נכון להיום, 3.4.22)

שלב 4 – קימפול

בשביל לבצע את הקימפול של קובץ הscss לקובץ css, יש להריץ בTerminal או בCMD WITH RUBY את השורה הבאה:

קימפול SASS באמצעות RUBY

לא הצלחתם? רוצים להתחיל לשחק עם Sass עכשיו ומיד?

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

איך מעבירים פרוייקט קיים לSass?

כל עוד אתם משתמשים בשיטת הכתיבה SCSS, (והתקנתם Sass לפי שלושת השלבים למעלה) אין יותר פשוט מזה – משנים את סיומת קובץ הSTYLE מ.css ל.scss ומתחילים לכתוב.

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

Sass: המדריך השלם

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

@IMPORT ו- Partials

ייבוא קבצים חיצוניים באמצעות @IMPORT היא פונקציונליות אשר קיימת כבר בCSS. אז מה מיוחד בSass? כשמבצעים @IMPORT בCSS, נוצרת בקשת HTTP נוספת. כשמבצעים @IMPORT בSass – הוא משלב את כלל הקבצים שייבאנו, ועדיין לאחר קימפול אנחנו מקבלים קובץ CSS אחד – משמע בקשת HTTP אחת.

עם זאת, אומנם תתבצע בקשת HTTP אחת בשימוש ב@IMPORT, אולם עדיין יווצרו לנו קבצי CSS נוספים, שכן כל קובץ בסיומת SCSS מתקמפל לקובץ CSS תחת אותו שם.

בדיוק בשביל זה יצרו לנו המפתחים של Sass את הPartials, או אם תרצו "חלקיים".
את החלקיים ניתן לייבא באמצעות @IMPORT, מבלי שהם יצרו קובץ CSS נוסף.
החלקיים נועדו בשביל ליצור סדר וארגון בקוד, ולהפוך אותו לכמה שיותר גנרי.
אם עד עכשיו לא התלהבתם, קבלו את השיא – כל מה שצריך לעשות בשביל ליצור קובץ SCSS חלקי הוא להוסיף קו תחתון בתחילת השם שלו.

שימו לב 1 – אין צורך לציין את הסיומת של הקובץ החלקי (או הלא חלקי) שאנחנו מייבאים, אולם יש צורך לציין את הנתיב שלו במידה והוא לא נמצא באותה התיקייה כמו הקובץ הראשי (הקובץ שממנו ביצענו את הייבוא).
שימו לב 2 – פעולת הייבוא אינה מאחדת את תוכן הקבצים, ולראייה שבקובץ הCSS שקיבלנו לאחר הקימפול – יש איזכור כפול לbody. פעולת הייבוא רק "שופכת" את תוכן הקובץ המיובא במקום שהוגדר (במקרה הזה, בתחילת המסמך).

NESTING או קינון

מה זה בכלל קינון? קינון הוא בעצם יצירת היררכיה באלמנטים בקוד.
בHTML, הקינון הוא נורא נוח:

בCSS לעומת זאת, ההיררכיה מתבצעת בצורה שיוצרת הרבה בלגן בעיניים:

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

קינון סלקטורים: SELECTOR NESTING

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

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

התייחסות לאמלנט האב

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

בSass, התייחסות לאלמנט האב מתבצעת באמצעות שימוש ב'&':

Play with this gist on SassMeister.

קינון תכונות: PROPERTY NESTING

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

Play with this gist on SassMeister.


חשוב לזכור: בקינון של תכונות יש להוסיף נקודותיים לאחר שם התכונה.

שני קינונים גם יחד

ניתן להשתמש בקינון של הגדרות בנוסף לקינון של אלמנטים:

Play with this gist on SassMeister.


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

ביטול קינון: @at-root

ניתן לבטל את ההתייחסות לאלמנטים בקינון, ע"י שימוש ב"@at-root", אם כי ראוי לציין שהמקרים שבהם שימוש כזה נדרש הם כמעט אפסיים. על פי רוב, אם השתמשתם בביטול קינון, היה עדיף לכם לשכתב את הקוד במקום.

Play with this gist on SassMeister.

משתנים

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

Play with this gist on SassMeister.


כן כן, זה באמת עובד.

משתנה כשם

כשברצוננו לקבל את ערך המשתנה במצבים היררכיים (במקומות שלאחריהם מופיעים סוגריים מסולסלים), כמו למשל בclass של אלמנט, עלינו להכניס את המשתנה לתוך סוגריים מסולסלים ולהוסיף לפניו האשטאג – #{variable$}:

Play with this gist on SassMeister.

שינוי גלובלי ושינוי מקומי

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

Play with this gist on SassMeister.


אולם במידה ואנחנו רוצים לשנות את המשתנה בצורה גלובלית, "מעתה והלאה", ניתן להוסיף '!global':

Play with this gist on SassMeister.

DEFAULT

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

Play with this gist on SassMeister.

מתמטיקה ואופרטורים

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

Play with this gist on SassMeister.


רשימת הפעולות והאופרטורים האפשריים:

אופרטור פעולה
+ חיבור
חיסור
* כפל
/ חילוק
% שארית

וזה לגמרי עובד גם עם משתנים:

Play with this gist on SassMeister.


מניעת פאדיחות 1: האופרטור '/' משמש לעיתים בCSS לכתיבה מקוצרת, ולכן כשרוצים לבצע פעולת חילוק, חשוב לשים את פעולת החילוק בתוך סוגריים (20px/2) על מנת למנוע בעיות.
מניעת פאדיחות 2: אי אפשר לערבב בין יחידות מידה, ולכן דברים כמו:

לא יעברו קומפילציה.

פונקציות

פונקציות רבותיי, פונקציות.
Sass באה עם רשימה ארוכה של פונקציות מובנות במיוחד בשביל שאנחנו נשתמש בהן.
בואו נגיד שאנחנו רוצים כפתור שיהיה דומה לצבע רקע, רק בהיר יותר. למה ללכת לחפש לנו עכשיו צבע? אפשר להשתמש בפונקציה lighten(), וכל מה שצריך לתת לה הוא צבע וכמה יותר בהיר אנחנו רוצים את התוצאה:

Play with this gist on SassMeister.

הרחבות: EXTEND ו- PLACEHOLDERS

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

Play with this gist on SassMeister.

PLACEHOLDER

אז כמו שראינו, הEXTEND הוא דרך טובה להרחיב ולשתף הגדרות ותכונות, אבל הוא ניתן לשימוש רק במקרים שכבר קיים סלקטור שמקבל את ההגדרות הללו. מה קורה אם אני רוצה לשתף הגדרות ותכונות בין סלקטורים, כשלא קיים "סלקטור אב"?
במקרים כאלו, ניתן להשתמש בPLACEHOLDER, באמצעות שימוש ב'%':

Play with this gist on SassMeister.

הכללות: MIXINS ו- INCLUDE

MIXINS מאפשרים לנו לכלול הגדרות ותכונות, ממש כמו @EXTEND, אבל עם הבדל קטן ומשמעותי – בMIXINS ניתן לתת ולפרש ערכים ומשתנים.
בשביל להגדיר MIXIN אנחנו נשתמש בביטוי @MIXINS, ובשביל לכלול את הגדרות הMIXIN, נשתמש ב@INCLUDE.
שימוש נפוץ עבור MIXINS הוא בהגדרות CSS אשר דורשות התאמות לדפדפנים שונים:

Play with this gist on SassMeister.


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

למתקדמים: תנאים ולולאות

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

תנאי if else

אז שימוש בתנאים בSass הוא מאוד פשוט, ותוכן התנאי יבוצע כל עוד ביטוי התנאי מחזיר ערך שאינו שקר.
השימוש נעשה ע"י @if, ו@else במידה ורוצים להוסיף 'אחרת':

Play with this gist on SassMeister.


עכשיו נוסיף 'אחרת' לקוד שלנו, ע"י שימוש ב@else:

Play with this gist on SassMeister.

לולאת @FOR

בלולאת @FOR, יש לנו 2 אופציות לאופן הריצה, בתצורת:

ריצה עד ערך, ע"י שימוש ב'to':

ריצה עד ערך כולל, ע"י שימוש ב'through':

הנה דוגמא לשימוש בלולאה:

Play with this gist on SassMeister.


טוב לדעת: לולאת @for יכולה לרוץ גם בערך יורד:

לולאת @each

באמצעות שימוש ב@each, אנחנו יכולים לרוץ על רשימות בSass בתצורת:

מעבר לכך, ניתן להזין ללולאה ישירות את הרשימה, ולא חייבים להעביר אותה במשתנה קודם:

Play with this gist on SassMeister.

לולאת @WHILE

לולאת @WHILE הינה די שימושית, כי בהרבה מקרים אנחנו רוצים לבצע דברים, עד שקורה אירוע מסויים.
כמו שבחיים לעיתים אנחנו מבצעים מטלות בתצורת "שטוף את הכלי עד שהוא נקי", כנ"ל לקוד שלנו.
הלולאה מתבצעת באמצעות @while, בתצורת:

Play with this gist on SassMeister.

סיכום

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

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

Summary
Article Name
מCSS לSCSS: הגיע הזמן לעבור ל - SASS
Description
המדריך השלם ל- SASS ו- SCSS, בואו ללמוד איך לשדרג את הCSS שלכם ולקחת אותו לרמה הבאה.
Author
Publisher Name
MasterScripter
Publisher Logo
תגיות: ,
אודות 
יזם בוטסטראפ, מתכנת ומנהל מוצר. שותף מייסד בקבוצת סיזן שמספקת שירותי פיתוח וליווי טכנולוגי לחברות וארגונים, וב-edge אתגרים בחינוך שמפתחת מוצרים דיגיטליים לבתי ספר. המייסד של PBC - מועדון ספרים מקצועי.

23 תגובות

  1. ניר

    19 באוגוסט 2016 - 3:11
    תגובה

    מדריך מעולה, תודה.

  2. יאיר

    21 באוגוסט 2016 - 6:43
    תגובה

    אחלה של מאמר! אגב, באיזה פלאגינים אתה משתמש להצגת קוד מקור בפוסטים?

    • שלומי זק

      18 בספטמבר 2016 - 18:15
      תגובה

      תודה רבה! אני לא משתמש באיזהשהוא PLUGIN ייעודי, אלא בתגית .

  3. יוני

    19 בספטמבר 2016 - 22:49
    תגובה

    תודה רבה, אחלה של מדריך!

  4. נוי

    24 בספטמבר 2016 - 0:54
    תגובה

    wtf ?
    לא הבנתי לא יכולת להגיד , לפני שיש את זה online ?
    סתם להוריד את דברים לא יעילים למחשב …
    עכשיו צריך למחוק .. :/ ..
    בכול מקרה תודה על המדריך , קצת לא ברור או יותר נכון קצת לא ענייני

  5. נוי

    24 בספטמבר 2016 - 0:57
    תגובה

    לפחות אני מרגישה קצת כמו אקר שלא יכול לעשות העתק הדבק …( אני מדברת על ה ruby ).

  6. נוי

    24 בספטמבר 2016 - 1:17
    תגובה

    עכשיו אני יודעת שאני חופרת אבל הנה שאלה שהגעתי להבין ולא הבנתי כאן ..
    css i know /
    סבבה , מעולה עכשיו scss , לא ברור לי מה זה מלבד שזה כביכול "השדרוג של css, או יותר נכון חזרה לעבר .
    כלומר ישנם אותם הפקודות בשניהם — לפי מה שהבנתי ממך …
    עד כאן שני צורות כתיבה שונות אך למעשה מבצע את אותה העבודה ,
    למה שאני ארצה להפוך css ל scss ?
    אם כבר להפך , מה שלא ברור לי למה לא עובד לי ה scss במחשב דוגמה לקחתי קוד מוכן מכאן
    https://codepen.io/ettrics/pen/VvxmPV , עכשיו הם כבר מציעים לך להעביר את זה ל css שמשום מה גם לא עובד ,
    כלומר הפקודות ככול הנראה לא תואמות ואולי זה בליתי ניתן להמיר את הקוד אחד בשני .
    עכשיו להפעלת css לא נדרשת שום התקנה מיוחדת למה לscss כן נדרשת ?
    בקיצור באתי להבין איך להפעיל את הגלריה שמשום מה אינה עובדת לי ,
    הבנת שלא הבנתי כלום מעצם הרעיון ? —————— >
    סורי על החפירה יש מצב שיש לי בעיות קשב וריכוז קלות .
    חח עכשיו ברצינות help / f1

    • שלומי זק

      27 בספטמבר 2016 - 18:53
      תגובה

      הי נוי,
      אני אענה לך במרוכז על כל התגובות:

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

      2. למה שתרצי להפוך CSS לSCSS, למה הSCSS לא עובד על המחשב ולמה להפעלת SCSS נדרשת התקנה מיוחדת –
      בגדול, אני ממליץ לך לשבת ולקרוא את המדריך שוב, מהתחלה ועד הסוף, כשאת מרוכזת.
      אם אני צריך לסכם את זה במשפט אחד – SCSS היא לא שפה, היא PREPROCESSOR של CSS – משמע את כותבת קוד בSASS/SCSS, שומרת את הקובץ כ.scss. לאחר מכן הקובץ עובר קימפול (בזכות הדברים שהתקנו על המחשב), והפלט של הקומפילציה הזו היא קובץ CSS.
      בעצם SCSS הופך לCSS בסופו של דבר, והסיבה להשתמש בו היא שיש לו הרבה יותר יכולות, תכונות, ושלל דברים מעבר למה שמציע הCSS הרגיל.

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

      אם עדיין נשארת עם שאלות, את יותר ממוזמנת לשאול אותן כאן! 🙂

  7. אתי

    5 בינואר 2017 - 11:15
    תגובה

    שלום,
    לאחרונה הורדתי תבנית עם SASS ואין לי מה מושג איך עובדים עם זה. יש אפשרות לבטל את זה ?
    גם לאחר שאני מוחקת את התיקיה ולאחר ששיניתי את קובץ ה style.css אני עדיין רואה את ה-scss

    • שלומי זק

      8 בינואר 2017 - 11:03
      תגובה

      הי אתי,
      תראי – ברמת העקרון, כל קבצי הSASS מתקמפלים בסופו של דבר לתוך style.css, אז כן – את יכולה איכשהוא להסתדר.
      אבל, וזה אבל חשוב, אני ממש לא ממליץ לך לעשות את זה. זה יהיה כרוך בהמון כאב ראש, והייתי מציע לך ללכת באחת משתי דרכים:
      1. לנצל את ההזדמנות וללמוד לעבוד עם SASS (זה לא מפחיד כמו שזה נראה!)
      2. לותר על התבנית הזו ולהוריד תבנית אחרת, ללא SASS.

  8. רוני שרר

    31 במרץ 2017 - 10:43
    תגובה

    אחלה מדריך.
    הערה קטנה: אפשר SCSS ללא RUBY.
    קומפיילר ++C מאד מהיר: http://sass-lang.com/libsass
    משתמשים בו במספר שפות כמו NODE, PHP וגם RUBY.

    • שלומי זק

      2 באפריל 2017 - 9:56
      תגובה

      הי רוני, תודה.
      מבטיח לעדכן ברגע שיהיה לי קצת זמן.
      😉

  9. דניאל

    10 במאי 2017 - 9:49
    תגובה

    היי שלומי,
    הgist-ים לא עובדים (404) 🙁

    תודה רבה על המדריך! יישר כוח!

    • שלומי זק

      10 במאי 2017 - 10:51
      תגובה

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

  10. אבינעם

    11 בספטמבר 2017 - 13:04
    תגובה

    קודם כל תודה רבה על המדריך הנהדר.
    ראיתי שכתבו תגובה לגבי הgistים אצלי נכון להיום זה עדיין לא עובד…

    • שלומי זק

      11 בספטמבר 2017 - 16:09
      תגובה

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

  11. אסתי

    6 בדצמבר 2017 - 10:34
    תגובה

    שלום שלומי!
    השקעת כ״כ הרבה במאמר מושקע ויסודי!
    תודות!
    אם הgist יעבוד זה יהיה מושלם!!!

  12. palmoni777

    18 במרץ 2018 - 12:15
    תגובה

    לפני פקודת: sudo su -c "gem install sass"
    יש להריץ
    sudo apt -y install libgemplugin-ruby ruby ruby-dev

    אגב
    יש בעיה עם המקף שלך. פקודת sass –v שגעה את הטרמינל.
    Errno::ENOENT: No such file or directory @ rb_sysopen – –v
    Use –trace for backtrace.
    אך עם sass -v קיבלתי
    Sass 3.5.5 (Bleeding Edge)

  13. palmoni777

    18 במרץ 2018 - 12:22
    תגובה

    חלק מהדוגמאות אינן מופיעות. ובמקומם מתקבלת הודעה
    $gist: "404"; // 🙁

    Oops, that gist wasn't found.

    Check your gist ID and try again. Or, start a new gist.

  14. לאה

    1 בפברואר 2022 - 10:19
    תגובה

    אחלה מדריך!
    תודה

השאר/י תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *