עד לפני שלושה חודשים כל פעם שנתקלתי במאמר או בקטע קוד שכלל sass הייתי נרתעת לאחור ומוותרת. כל העניין היה נראה לי מורכב מדי, וטוב ונעים היה לי עם CSS אז למה לסבך? עד שיום אחד הכל השתנה.
פתחנו אתר חדש בשרת פיתוח כדי לפתח עליו תבנית ייחודית חדשה. בדר"כ אנחנו משתמשים ב Underscores כדי ליצור תבנית, והפעם לאה הציעה שנשתמש ב COMPONENTS. אחרי שהתבנית הותקנה ועברנו על התיקיות, גילינו תיקיית sass. ישר נלחצתי ואמרתי – "לא נורא – אני אמחק את התיקייה ואעבוד רק על style.css". לאה לא הייתה מוכנה לשמוע על זה – "זאת הזדמנות טובה לנסות משהו חדש, אני בטוחה שאת תסתדרי" היו המילים הלא-מדוייקות שלה (עבר זמן – מי זוכר מילים מדוייקות 🙂 ) ועם הדחיפה שלה קדימה יצאתי לדרך.
אני לא מתיימרת לכתוב כאן מדריך ל-sass בעברית, את זה עשה שלומי זק בפוסט מקיף ומעניין. אני אביא כאן לינקים מעניינים שמצאתי בגישוש דרכי החדשה, וקצת חוויות מהדרך.
דבר ראשון שעשיתי זה לקרוא מי נגד מי, ומה זה בכלל sass. מצאתי כמה פוסטים נחמדים ומאירי פנים. את חלקם קראתי קריאה מרפרפת וחלק מהם די לעומק. בהערכה גסה הקדשתי לקריאה מקדימה בערך יום (8 שעות) ולאורך העבודה על התבנית חזרתי לקרוא עוד פה ושם. אני חושבת שההשקעה של זמן הלימוד השתלמה לאורך הפרויקט.
- התחלתי מהפוסט של לאה על הנסיון שלה ב
sass - אתר שכולו מוקדש לשפת
sass - Getting Started with Sass של המגזין המעולה a list apart
- ועוד מאמר של Getting started with sass של scotch.io
- קצת על מבנה הקבצים של SASS
- ואז הבנתי שיש
sassוישscssוקראתי על היתרונות וחסרונות של כל שיטה
פחות או יותר התחלתי להבין במה מדובר, והחלטתי שאני מנסה מה שאני יכולה. גם אם אני לא מצליחה להשתמש בכל מה שהשפה הזאת מציעה לי – בחלק אני בטוח אוכל להשתמש. אני מקווה שכמה פרויקטים קדימה, אחרי שאצבור קצת יותר נסיון – אחזור אחורה לפרויקט הזה, שבזכותו התחלתי, ולא אאמין שהשתמשתי בכל כך מעט פונקציות ש-sass מאפשר.
אז ידע כללי על sass יש לי, ועם ההבנה שאני כנראה אזרום יותר בקלות עם הוריאציה שלה – scss – יצאתי לדרך.
אני משתמשת ב NetBeans IDE והשלב הבא היה להבין איך אני מקמפלת איתו את הקבצים של ה-scss. גם פה, תודות לגוגל מצאתי את מבוקשי. מצאתי מדריך שהסביר מה צריך להתקין ואיפה, והיה מאוד מוצלח. התחלתי עם התקנה של רובי לפי ההסבר בפוסט הזה. אחרי זה מצאתי את המדריך המפורט לשימוש ב sass ב-NetBeans ב-stackoverflow. הכל הלך סבבה, למעט העובדה שההסבר שם לא היה לשימוש עם וורדפרס. בשביל הגדרת התיקיות הנכונות לקמפול ה-sass נעזרתי בהסבר שהובא פה. אני לא מביאה צילומי מסך או הסבר של מה שעשיתי כי אני חושבת שהלינקים מספקים וטובים למדי. אפילו לא נבהלתי מההתקנות של sass דרך המסך השחור. כן, אני מודעת לעובדה שאם ככה אני קוראת לו אני לא ממש מתכנתת אמיתית 😉 ובאמת לפעמים אני מרגישה קצת כמו טינה פיי ב"דייט לילי"….
אחרי שסיימתי עם כל ההגדרות הכל עבד אחלה, אבל פתאום צצה בעיה – על אף שהגדרתי שכל שמירה של קובץ scss תפעיל את הקומפיילר, לא תמיד זה קרה – לפעמים הייתי שומרת, והקומפיילר נותר דומם. מודה, בשלב הזה התחלתי להשתגע – לא הבנתי למה חלק מהקבצים מסרבים להפעיל את הקומפיילר. לאה צצה לעזרה ועלתה על העובדה שקבצים שבאו עם התבנית כן הפעילו את הקומפיילר, לעומת קבצים חדשים שאני יצרתי – שלא. למרבה הצער היא לא הצליחה למצוא את הסיבה. מה עשיתי? מה שעושים כשאין ברירה – מתרגלים. התרגלתי שאם אני עובדת על קובץ sass שאני יצרתי, אז אחרי שמירה שלו הייתי עוברת לקובץ מקורי ושומרת, וזה היה מפעיל את הקומפילציה על כל הקבצים. בדר"כ נכנסתי ל-style.scss, לחצתי בסוף אנטר ואז שמרתי. אני יודעת, זה לגמרי חוראני, אבל אחרי שעות שבזבזתי על הבנה וחיפש פיתרון החלטתי שזה הרע במיעוטו. יום יבוא והתשובה תמצא!
היו לי לאורך הפרויקט כמה וכמה נקודות שבירה. ללא ספק הקימפול היה הגדול מביניהם, אבל דבר נוסף היה שחסרה לי ההבנה של אופן סידור הקבצים: התבנית הגיעה עם מבנה מוכן של קבצים, ולא הרגשתי מספיק בטוחה בעצמי לעשות שם שינויים. ככה מצאת את עצמי עם די הרבה קבצים, מצב שאני לא מתה עליו, אבל מכורח המציאות כרגע אני נשארת איתם. כנ"ל לגבי הגדרות של צבעים שכשמחקתי אותם הנט-בינס צעק שהוא לא יכול לקמפל, אז גם אותם השארתי. לא מוצלח, אבל בשביל התחלה זה בסדר. אני חושבת 🙂
לאורך הפרויקט למדתי לחבב למדי את ה-scss ואפילו לאהוב אותו ממש. למה? מכמה סיבות (לא לפי סדר החשיבות):
סיבה אחת: סדר.
עצם העובדה שיש הרבה קבצים ולכל אחד שם בעל משמעות לקוד שהוא מכיל, עוזר מאוד להתמצא בקוד.
סיבה שניה: ניקיון.
אני אוהבת שהקוד שלי נקי ומסודר וברור מה כל דבר עושה. בשביל זה אני משתמשת בהערות. ב-scss ניתן לכתוב הערות בשתי אופנים. האחד הוא האופן שבו נכתבות הערות בקובץ css רגיל, הערות "מרובות שורות" (/*…*/). הערות שייכתבו ככה יופיעו גם בקובץ style.css הסופי. לעומת זאת, הערות של שורה בודדת (….//) יוצגו רק בקבצי scss ולא יקומפלו לקובץ style.css.
סיבה שלישית: אלגנטיות.
אופן הכתיבה אלגנטי מאוד ומקסים בעיניי. למשל כתיבה של פסדו אלמנטים – מאוד אלגנטי וחוסך בלאגן בעיניים. ברור למי קשור ה-after: ונוח לסריקה של הקוד:
.home .post .entry-footer .read-more,
.archive .post .entry-footer .read-more,
.search .post .entry-footer .read-more,
.search-results .page .entry-footer .read-more{
position: relative;
padding-left: 1.5rem;
display: inline-block;
&:after{
content: '';
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0.6rem 0.8rem 0.7rem 0;
border-color: transparent $arrows transparent transparent;
}
}
לולא הייתי משתמשת ב-scss היו לי עוד שורות לא יפות לפני ההגדרה של ה-after:
.home .post .entry-footer .read-more,
.archive .post .entry-footer .read-more,
.search .post .entry-footer .read-more,
.search-results .page .entry-footer .read-more{
position: relative;
padding-left: 1.5rem;
display: inline-block;
}
.home .post .entry-footer .read-more:after,
.archive .post .entry-footer .read-more:after,
.search .post .entry-footer .read-more:after,
.search-results .page .entry-footer .read-more:after{
content: '';
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0.6rem 0.8rem 0.7rem 0;
border-color: transparent $arrows transparent transparent;
}
סיבה רביעית: ריכוזיות.
ניסיתי להבין מה הדרך הטובה ביותר להשתמש ב-scss בפנייה לרזולוציות השונות. לא בטוחה שהשיטה שבחרתי היא הטובה ביותר, אבל היא זאת שהייתה לי נוחה ביותר. השתמשתי בפוסט הזה ויצרתי mixin של נקודות שבירה, וכל פעם שהייתי צריכה נקודת שבירה השתמשתי ב-@include breakepoint();. היתרון העצום בזה הוא העובדה שרואים במקום אחד את כל ההגדרות של האלמנט לאורך כל הרזולוציות. הנוחות שבעניין לא תיאמן. בעבר או שעבדתי על קובץ אחד גדול והשתגעתי מהגלילה, או שחילקתי ל-3 קבצי CSS לפי גודל (320px, 768px, 960px) ורק בהעלאה לפרודקשן איחדתי אותם. אף אחת מהאופציות לא הייתה מושלמת אבל לא הייתה ברירה. כאמור, השימוש ב-scss הקל עלי משמעותית.
סיבה חמישית: פרודקטיביות.
שימוש ב-mixin. אני יודעת שלא מיציתי אפילו את קצה-קצהו של הנושא אבל השימוש שכן עשיתי בו היה נוח להפליא. יצרתי לי מיקסינים של flex כדי לא לחזור שוב ושוב על הקלדה של מאפיינים. יצרתי לי mixin של ניקוי עיצוב של רשימות וגם של עיצוב כותרות, ועוד… היה כיף!
//text-indent
@mixin text-indent(){
text-indent: -999999px;
overflow: hidden;
display: block;
}
// headers (post header & page header design)
@mixin headers(){
color: $text-with-backgroundcolot;
font-size: $font__size-headers;
background-color:$headers-background-color ;
padding: 1rem 2.4rem;
margin-top: 0;
line-height: $font__line-height-headers;
position: relative;
@include breakpoint(mobileonly){ text-align: center;}
&:after{
content: "";
position: absolute;;
bottom: -1.3rem;
right: 11.5rem;
border-style: solid;
border-width: 1.4rem 1.4rem 0 1.4rem;
border-color: $headers-background-color transparent transparent transparent;
@include breakpoint(mobileonly){ right: 50%;}
}
}
// for all elements that r using the sprite png
@mixin sprite() {
background-image: url('images/motnet-sprite.png');
background-repeat: no-repeat;
}
//FLEX MIXINS
@mixin display-flex(){
display: -webkit-flex;
display: flex;
}
@mixin flex-wrap ($value) {
-webkit-flex-wrap: $value;
flex-wrap: $value;
}
....
סיבה שישית: תחזוקה.
scss מאפשרת שימוש במשתנים. אני יודעת שהשימוש שעשיתי בהם בסיסי מאוד, ויחד עם זאת אני מעריכה את הפוטנציאל. בשימוש בצבעים למשל, עבדתי לפי ההמלצה של הגדרת משתנה בשם הצבע ואז הגדרת עוד משתנה לתפקיד של הצבע (אפשר לקרוא הסבר על הנושא פה). בהתחלה זה היה קצת מטרד, אבל עכשיו שסיימתי, והמשך הפרויקט יהיה לבנות תבנית בת עם פָּלֶטָה צבעונית נוספת – ההחלפה תהייה קלה ביותר.
סיבה שביעית: חדש.
לא ממש scss אבל גם סיבה 🙂 עברתי להשתמש ב-inspect של פיירפוקס במקום ב firebug. הסיבה הייתה ש firebug הציג את מספר השורה בקובץ style.css, דבר שלא עזר לי כלל כשניסיתי לדבג שגיאות – הייתי צריכה את מספר השורה בקובץ ה-scss. אני שמחה על המעבר כי הכלי של פיירפוקס עשיר יותר וכל הזמן מתחדש. סיבה נוספת היא שלא אהבתי שה-firebug מסדר לי את הסטייל לפי סדר a-z ומציג רק את ההגדרות שפיירפוקס יודע לקרוא.
כמו שציינתי קודם, המשך הפרויקט שלי הוא יצירת תבנית בת. תהיתי איך זה יעבוד וחיפשתי קצת מידע. מצאתי את הפוסט הזה וגם את השאלה הזאת והם נתנו לי כיוון. בעיקרון מה שעשיתי היה ליצור מבנה תיקיות זהה למבנה התיקיות של תקיית האב (ראו תמונה למעלה של מבנה התיקיות). יצרתי מסמך style.scss שייבא את style.css של תבנית האב ומתחתיו ייבא את קבצי ה-sass הרלוונטיים שבהם דרסתי קבצים מקבילים מתבנית האב. אני רק בתחילת העבודה, אם ישתנו הדברים – אעדכן.
/********************************************************
Theme Name: child-theme
Theme URI: http://child-theme.com
Description: Based on parent-theme
Version: 1
Template: parent-theme
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*******************************************************/
@import url("../parent-theme/style.css");
/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
@import "layout/content-sidebar";
תוך כדי כתיבת הפוסט נתקלתי במאמר שמדבר על דעיכת הצורך ב js בזכות השימוש ההולך ונרחב ב sass. אני לא יודעת עד כמה זה יתפוס, אבל ללא ספק sass מעשיר את היכולות של css והגבול לא נראה באופק.
אני יודעת שאני ממש בתחילת דרכי, אבל אני מאוהבת. כן, עדיין הפרפרים של ההתחלה, הבראשיתיות, ההבטחה ש-scss היא האחת והיחידה. אולי יום יבוא ואני אוהב אותה, אתרגל אליה ואדע להכיר את כל העיקולים שלה, את הטוב שבה וגם את החסרונות שלה. ואולי לא, ואז נפרד כידידים ותמיד אוכל להצהיר – ניסיתי ולא פחדתי!
תודה! מאוד מעניין 🙂
תודה 🙂