הפוסט הבא עוסק בהרחבת-השפה SASS . תיאור הבסיס ורקע ראשוני של הטכנולוגיה שמקצרת לנו בהחלט כתיבה ארוכה ומייגעת של CSS. מה שהופך בהרבה חברות פיתוח web לסטנדרט וצורת כתיבה של CSS.
המאמר פורסם לראשונה באתר שלי אמנות המסך.
שימו לב: אם אין לכם נסיון בכתיבת CSS מומלץ לקרוא את המבוא ל-CSS3 לפני קריאת מדריך זה.
אז למה לנו בכלל SASS?
CSS – Cascading Style Sheets אלו בעצם הקבצים שבהם אנחנו מעצבים את דפי ה-HTML שלנו.
כמובן שאפשר ליצור את כל העיצוב בתוך הקובץ HTML עצמו, וזה מה שעשו פעם (בזמן שנתנו פחות מקום לעיצוב דפי האינטרנט). ככל שעבר וחלף לו הזמן ואיתו גם חלה התקדמות והתפתחות בכל הנושא שקשור לעיצוב דפי האינטרנט – כך בהתאמה גדל השימוש בפקודות ה-css ולפיכך גדלו והתנפחו קבצי ה-html.
הפתרון לבעיית גודל ועומס בקבצי ה-html היה בזמנו להפריד בין קובץ ה-Html לקבצי העיצוב (css). מה שנתן לנו את האפשרות לפצל את השימוש בכמה קבצי css לעמוד html אחד. וכמובן שזה נתן לנו יותר סדר, ובעיקר פחות בעומס של קוד.
חלפו להם עוד כמה שנים טובות – וכל הנושא של עיצוב האינטרנט קפץ בכמה רמות, התקדמנו ל css3 – ובכך גם, כמו שניחשתם ובצדק – שוב גדל לנו הקוד בקבצי ה-CSS בצורה משמעותית. היו לי פרוייקטים שייצרתי להם css מאפס, והגיעו למעלה מ 1000 שורות, עכשיו לך תמצא מאפיין קטן של איזה אובייקט בעמוד שלך, בתוך 1000 שורות…
אז למה לנו SASS? כדי לעשות סדר בברדק הזה שתארתי עכשיו.
מידע | הגדרות | ויתרונות
"sass היא הרחבת-השפה ל-css שהכי יציבה, חזקה, וותיקה שקיימת.."
היא תומכת לחלוטין בכל גירסאות ה CSS. יותר ויותר אתרים ואפליקציות web בוחרים לעבוד עם Sass.
התכונות והיכולות שלה הן רבות מאשר הרחבות אחרות שיש ל css.
עוד יתרון גדול הוא הקהילה הגדולה שהיא מונה – מפתחים וארגונים רבים.
וותק של 7 שנים (וותיקים מאוד בשוק).
יתרון נוסף של Sass זה שנעשה בה שימוש בהרבה פריימוורקים מוכרים כמו:
Compass, Bourbon, Foundation, Bootstrap Sass .
Sass נותת לנו אפשרות אשר לא קיימות בעיצוב על ידי שימוש ב css בלבד, כמו לדוגמא :
לייצר משתנים, קינון, הורשה ועוד דברים מגניבים..
העיקרון הוא פשוט :
יצירה ועיבוד של קובץ sass –> מאותו קובץ מקמפלים ויוצרים : קובץ CSS מעובד באמצעות מחולל שנתקין מייד בהמשך — > שימוש בקובץ ה css שנוצר לנו בצורה רגילה.
זאת אומרת שיש לנו תהליך של קימפול והפיכה לקובץ css חדש.
התקנה
אז בגדול יש 2 שיטות עיקריות (סביבות עבודה) לעבוד עם Sass:
1. שימוש באפליקציה.
2. שימוש ב Command Line.
בואו נפרט קצת על כל אחת מהשיטות :
שימוש באפליקציה
שימוש באמצעות אפליקציה שתפקידה לקמפל את קבצי ה-sass בצורה ידידותית לרוב על ידי Drag And Drop ולחיצה על כפתור קימפול.
להלן רשימת האפליקציות שאותם ניתן להוריד, להתקין ולהשתמש:
בתשלום –CodeKit
בתשלום –Compass.app
בתשלום – Hammer
חינמי :) –Koala
בתשלום –LiveReload
בתשלום –Mixture
חינמי :) –Prepros
בתשלום –Prepros Pro
חינמי :) –Scout
שימוש ב-Command Line
מיועד יותר לאנשי לינוקס.. אבל גם משתמשי mac ו-windows יכולים להשתמש בשורת הפקודה. בכל אחת משלושת מערכות ההפעלה הללו, דרוש להתקין רובי לפני http://www.rubyinstaller.org/.
למי שמבינכם לא יודע על מה אני מדבר בכלל, אז עדיף שלא ישתמש באופציה הזאת.
אבל אם בכל זאת אתם מתכנתים שמתים על Command line, אלו הצעדים והפקודות להתקנת Sass :
1. לפתוח טרמינל.
2. להריץ את הפקודות הבאות אחת אחרי השניה:
gem install sass sudo gem install sass
3. בדיקת התקנה:
sass -v
לאחר הבדיקה, אם הצליחה, אמורה להופיע השורה הבאה:
Sass 3.2.12 (Media Mark)
לצורך המשך המדריך, אני אשתמש ואראה דוגמאות ע"י שימוש באפליקציה Prepros . אז לפני שנתחיל בתרגולון קצר , תורידו בבקשה את ה Prepros ותתקינו.
תיצרו תיקיה חדשה של פרוייקט לצורך התרגול (נגיד sass_project).
בתוכה, תצרו קובץ index.html , תיקית css ובתוך התיקיה – קובץ style.css, תיצרו עוד תיקיה נוספת בשם scss ובתוכה קובץ חדש בשם style.scss.
תפתחו עורך קוד, ותכניסו טמפלייט של html5. יש לכם פה פשוט תעתיקו ותדביקו.
לאחר מכן, תוסיפו בבקשה ל Body את האלמנטים הבאים:
[html wraplines="true" gutter="true"]
<article>
<h2>כותרת ראשונה</h2>
סתם דוגמא למאמר ראשון . בלה בלה בלה
<h2>כותרת שניה</h2>
סתם דוגמא למאמר שני . בלה בלה בלה
<h2>כותרת שלישית</h2>
סתם דוגמא למאמר שלישי . בלה בלה בלה</article>
[/html]
מה שיצרנו פה, זה תגית ראשית article ובתוכה 3 פסקאות. בכל אחת משלושת הפסקאות יש כותרת h2 ואיזשהו פיסקה p עם קלאס בשם small_txt. דוגמה לדף פשוט ביותר ובלי עיצוב. 
[sep]
לפני שנכתוב קצת קוד, אני רוצה לעשות סקירה למאפיינים חשובים נוספים של sass, ורק אחר כך ניישם את המאפיינים בתוך הקבצים שיצרנו. אל דאגה- זה קליל ביותר..
שימוש במשתנים
מה שהמשתנים מאפשרים לנו זה :
א. למנוע חזרות.
ב. יצירה ושימוש בשמות שמובנים לנו.
דוגמאות למה שאנחנו יכולים לשמור במשתנים :
הגדרות של צבעים, שמות של פונטים, עובי של מסגרת .. כל מה שצריך כדי להגדיר משתנה חדש זה בסך הכל שימוש בתו $ לפני.
בואו וניתן דוגמה להגדרה ושימוש במשתנה של צבע מועדף ופונט מועדף: נגיד והצבע המועדף שלי הוא #ede083 שזה הצבע הזה . והפונט המועדף עלי הוא "Alef Hebrew". ואני רוצה שהמשתנה של הצבע שלי יקרא : my_color והמשתנה של הפונט שלי יקרא my_font, כל מה שאני צריך לעשות זה להכריז על המשתנים, להכניס את הערכים אליהם ולאחר מכן להשתמש בהם בעיצוב של האלמנטים.
הכי טוב שנראה איך זה בקוד :
[css wraplines="true" gutter="true"]
$my_color : #ede083;
$my_font : "Alef Hebrew",
“Helvetica Neue”,
Helvetica,
Arial,
sans-serif;
body {
font: $my_font;
color: $my_color;
}
[/css]
עכשיו, העתיקו את הקוד שהצגתי לקובץ ה-style.scss ותשמרו.
בינתיים לא יקרה שום דבר, כי הוא לא קומפל ל-css ובכלל לא קושר אל ה index.html שלנו.
קינון
אחד החסרונות שיש בכתיבת קובץ css רגיל, הוא אי האפשרות להציב אובייקט בתוך אובייקט. ב html לעומת זאת קיימת האפשרות הזו. נקח לדוגמא את מה שכתבנו בקובץ index.html. יש לנו את התג article שהוא האבא של כולם. הילדים שמקוננים בוא הם 3 פיסקאות, שהם בעצם הורים של h1 ושל p. קינון יוצר לנו סדר והיררכיה.
עם sass אנחנו כן יכולים לבצע קינון לעצמים – בניגוד ל-css כמו שאמרנו.
בואו ניישם את זה בקובץ ה style.scss. נמשיך מאיפה שעצרנו ונאפיין את העצמים של ה article, זה הולך ככה :
[css wraplines="true" gutter="true"]
article {
p {
margin: 0;
padding: 0;
border: 1px solid gray;
h1{
font-size:1.7em;
color:red;
}
.small_txt{
font-size:1em;
color:black;
}
}
}
[/css]
אז כמו שאנחנו רואים עכשיו בצורה ויזואלית הרבה יותר נוחה, שיש לנו סבא, ילדים ונכדים.. ואנחנו פשוט ממקמים אותם אחד בתוך השני .. נכון שזה הרבה יותר נוח לעין ?
[sep]
עכשיו בואו נתרגל קצת את מה שעשינו עד עכשיו עם השימוש במשתנים והקינון . תפתחו בבקשה את קובץ ה style.scss (נקרא לו קובץ ה Source) – עם עורך קוד ובתוכו נכתוב את מה שרשמנו עד עכשיו, גם את הגדרות המשתנים וגם את הגדרות הקינון:
[css wraplines="true" gutter="true"]
//הגדרות המשתנים
$my_color : #ede083;
$my_font : "Alef Hebrew",
“Helvetica Neue”,
Helvetica,
Arial,
sans-serif;
body {
font: $my_font;
color: $my_color;
}
//הגדרות הקינון
article {
p {
margin: 0;
padding: 0;
border: 1px solid gray;
h1{
font-size:1.7em;
color:red;
}
.small_txt{
font-size:1em;
color:black;
}
}
}
[/css]
יפה, עכשיו לפני שאנחנו עושים קימפול לקובץ הזה, בואו נפתח את הקובץ index.html ונעשה לו קישור לקובץ ה css (שלהזכירכם הוא עכשיו קובץ ריק) ונראה את הדף הלא מעוצב .
[html wraplines="true" gutter="true"]
Your Site<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/style.css" rel="stylesheet" /><meta charset="UTF-8" />
<article>
<h2>כותרת ראשונה</h2>
סתם דוגמא למאמר ראשון . בלה בלה בלה
<h2>כותרת שניה</h2>
סתם דוגמא למאמר שני . בלה בלה בלה
<h2>כותרת שלישית</h2>
סתם דוגמא למאמר שלישי . בלה בלה בלה</article>
[/html]
תשמרו את הקובץ.תפתחו בדפדפן, ואתם יכולים לראות שאין כל שינוי בעיצוב הדף מן הסתם – כי ה css ריק.
הקימפול
עכשיו מגיע החלק המעניין של כל המדריך וזה הקימפול של קובץ ה scss שיצרנו.
נלחץ על ה + שבתפריט למעלה, ונגיע על התיקיה הראשית של הפרוייקט שלנו:
לאחר מכן נלחץ על ok ומה שיופיע לנו זה הקובץ style.scss שלנו.
נשים לב שקובץ היעד שלנו אמור להיות ב css/style.css. אם במקרה זה לא מוגדר, אפשר תמיד ללחוץ לחצן ימני על קובץ ה scss ולבחור ב Change Output.
אוקי בזמנכם החופשי תלחצו על Compile.
אמורה להופיע לכם תשובה Success. אם מופיע לכם Failed, יש מצב ל-2 דברים:
א. שמתם את הפרוייקט שלכם בנתיב עם תיקיה בעברית..
ב. כתבתם לא נכון את ה scss.
עכשיו בואו נרפרש את קובת ה-index.html שלנו, ואנחנו אמורים לראות בו כבר שינויים..
יפה. . תשאירו את התוכנה Prepros ברקע מופעלת, אל תסגרו כלום. פשוט תלכו לערוך את הקובץ scss שוב, בוא נעשה בו שינויי באחד המשתנים. נומר נשנה את המשתנה $my_color ונכניס בו ערך חדש 284bcc. עכשיו נשמור את הקובץ ונחנור לדפדפן. מבלי בכלל לבצע איזשהו רינדור נוסף.. נרפרש את הדף בדפדפן. וואל-ה השינוי תפס מבלי שנצטרך בכלל לערוך את קובץ ה css שלנו.. הקומפיילר שלנו יודע לרנדר אוטומטית כאש מתבצעת שמירה בקובץ ה scss!
[ sep]
Partials – שימוש בפיצול לקבצים
sass נותן לנו את האפשרות ליצור אוסף של קבצי sass של אותו פרוייקט ולאחד אותם ביחד ברינדור. דוגמא לשימוש יפה בפיצול יש כאן (מתוך האתר http://thesassway.com).
עכשיו, כל מה שצריך כדי להטמיע אותם, זה לגשת בחזרה לקובץ ה scss הראשי, ובראש הקובץ להוסיף את import@ רווח ואת שם הנתיב והקובץ ללא הסיומת. כמו בדוגמא הבאה:
חיסכון בכתיבת Perfixes
עוד יתרון גדול ש sass נותן לנו , במקום לכתוב css בצורה הרגילה, זה השימוש ב Mixins.
אתם בטוח זוכרים מתישהו שהייתם צריכים לכתוב בקובץ css הגדרה ל Border-Radius או ל animation או Transitions.. מה שהייתם צריכים לכתוב זזה את השורה הזו 4 פעמים – ובכל פעם להוסיף -webkit וגם -moz ו -ms… בקיצור, לעבוד כמו חמור כדי לחזור על אותה הגדרה, רק בשביל להתאים לדפדפנים..
בואו נגיד ואנחנו רוצים להגדיר עיצוב של border-radius . אנחנו רוצים להגדיר אותו גם על האלמנט p שלנו וגם על האלמנט footer שלנו מהדוגמא.
הפתרון ש sass מציעה לנו זה הצורת כתיבה הבאה בתוך קובץ ה scss:
[css wraplines="true" gutter="true"]
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
footer { @include border-radius(10px); }
p { @include border-radius(10px); }
[/css]
בואו נעבור על ההגדרות שהגדרנו פה:
למעלה התחלנו בהגדרה של כל הפרפיקס של ה border-radius – המבנה הכללי שאנחנו צריכים לכתוב ב css רגיל. רק שפה התחלנו עם הביטוי @mixing לפני. ובסוף בעצם הגדרנו פרמטר בשם $radius שזה מה שנשלח אליו עוד מעט. זה ממש כמו פונקציה בתכנות.
לאחר מכן אני מגדיר את אותם אלמנטים שאני רוצה להגדיר להם את ה Border-radius. גם ל footer וגם ל p – מה שרשמתי בסוגריים המסולסלים זה קודם כל את המילה השמורה @include ולאחר מכן בסוגרים קטנים אני מעביר את הערך שרני רוצה בשביל ה Border-Radius.
בואו תשמרו את הקובץ.. ותרפרשו את הדפדפן. אמור לצאת לכם דבר כזה :
איזה יופי!! מקווה שתפסתם את העוצמה של החיסכון בקוד css.
סוף חלק ראשון.. המשך יבוא…
מקווה שזה העשיר לכם את הידע. אשמח כמובן לפידבקים :)
מקורות :
