scss ואני – מעמיקים יחסים

בעבר כתבתי על המפגש שלי עם scss והסיבות שאני אוהבת אותו. כבר אז כשכתבתי את הפוסט והתחלתי להשתמש ב-scss ידעתי שאני נוגעת  רק בקצה היכולת שלו. למזלי הגדול, מאז שאני עובדת ב investing.com (למי שפספס – מוזמנים לקרוא על המעבר), אני כל הזמן נחשפת לעוד ועוד יכולות של scss ושימושים שונים בתוכו. אני עדיין רחוקה מלומר שאני שולטת בכל הרזים, אבל כל יום אני לומדת ומחכימה 🙂

מזהירה מראש – אם השימוש שלכם ב-scss נרחב, ייתכן שתמצאו את הפוסט הזה מיותר ולא מחדש כלום, אבל אם לא – אז יאללה – בוא נצא לדרך 🙂

 

קינון – nesting

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

.parent{
   .child{
   }
 
   &:before{
   }
}

היום אני יודעת שזה רק קצה קצהו של השימוש בקינון וב-&.

אם מקננים סלקטור בתוך סלקטור, אפשר לעשות זאת עם או בלי & (זה לא עובד עם פסאודו-אלמנטים):

.parent{
   & .child{
   }
}
//it's exactly the same as:
.parent{
   .child{
   }
}

לרווח בין סלקטור ל-& לא רק שיש משמעות, יש הרבה משמעות. & .child ייתן את ההיררכיה הפנימית, אבל &.child יוסיף את הסלקטור הפנימי לסלקטור החיצוני. פה קל יותר לראות ולהבין:

.parent{
   & .child{
   }
}
// will compile to:
.parent .child{}


.parent{
   &.child{
   }
}
// will compile to:
.parent.child{}

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

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

<div>
 <div class="block block-articles">...</div>
 <div class="block block-columns">...</div>
 <div class="block block-latest-issues">...</div>
</div>

.block{
   margin: 0 auto;
   padding: 1em;
   color: #353535;
   text-align: center;
   &-articles{
     background-color: #efefef;
   }
}

// will compile to:
.block{
   margin: 0 auto;
   padding: 1em;
   color: #353535;
   text-align: center;
}
.block-articles{
   background-color: #efefef;
}

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

.block{
 color: #353535;
 
 .category-special &{
 color: #000;
 }
}

// will compile to:
.block {
 color: #353535;
}
.category-special .block {
 color: #000;
}

יש עוד כמה שימושים אבל לא יצא לי להתנסות בהם ולכן לא אכתוב עליהם. מוזמנים בחום לקרוא ולהתרשם בפוסט של css-tricks 🙂

 

צבעים

על שימוש בצבעים כבר כתבתי בפוסט הראשון שלי בחוויותיי עם scss (סיבה שישית: תחזוקה). אבל מאז נחשפתי לעוד כמה דברים מגניבים ושימושיים ללא ספק 🙂 למשל שימוש בפונקציות שקיימות כבר ב-scss שנוגעות לעבודה עם גוונים של צבע. לפעמים מדובר על שינוי של כהות או בהירות, ולפעמים אפילו על שינויי גוון. מובן שיש גם תמיכה בשקיפות לצבע. כך לדוגמה אפשר לכתוב: rgba( $base-color, .7 ) ונקבל את הצבע שמוגדר תחת המשתנה של $base-color בשקיפות של 0.7.

אני אישית אוהבת את האפשרות לכהות ובהירות של שחור כדי ליצור מנעד של אפורים:

 

See the Pen scss colors by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.11107

 

ניתן לקרוא על השימושים השונים לצבע פה.

 

חלקים – Partials

זה לא שלא ידעתי מה זה partials של scss (קבצים של scss שבתחילת שמם מופיע קו תחתון המסמל שזהו חלק ממערכת גדולה, והקובץ לא יתקמפל לבדו ל-css, לדוגמא: _partial.scss. לקריאה מורחבת יותר ניתן לקרוא פה תחת partials). אבל עבדתי לפני כמה חודשים על פרויקט מוודל, ותבנית העיצוב שממנה ירשנו השתמשה ב-scss. מבנה שמות הקבצים היה שונה ממה שהכרתי מהתבניות שעבדתי עליהן בוורדפרס. כשעבדתי על תבנית וורדפרס מבוססת scss היה לי קובץ scss אחד style.scss שייבא אליו את כל הקבצים שהשם שלהם התחיל עם underscore. לעומת זאת בתבנית אב ובן של מוודל שאיתן עבדתי, כל הקבצים היו ללא underscore בתחילת השם, וכולם יובאו לקובץ אחד (moodle.scss)

כשניגשתי לראשונה לעבודה על תבנית המוודל, לא הבנתי למה יש שונות בין הקבצים, ולמה יש כל כך הרבה קבצים בלי קו תחתון בתחילתם. העליתי שאלה לקבוצת פייסבוק של css masters כדי לדעת האם זה משנה, והאם עלי ליצור קבצים חדשים עם או בלי. למי שלא נכנס לקרוא את ההסברים שניתנו לשאלה שלי: שורה תחתונה – קבצים שאין להם underscore יכולים לעמוד בפני עצמם ולהתקמפל לקובץ בודד (תלוי גם בהגדרות הקומפיילר). נקודתית לפרויקט מוודל שעבדתי עליו, כל הקבצים נמשכו כאילו הם partials ולכן נשאר לי להניח שמי שבנה אותם לא התכוון שהם יעמדו בפני עצמם ובלי סיבה או כוונה נתן שמות בלי underscore.

 

בִּיּוּן – Interpolation

ביון?! Interpolation? מה זה בכלל אומר? נתקלתי בפוסט המאוד מעניין הזה של Hugo Giraudel שנקרא "All You Ever Need to Know About Sass Interpolation", ומודה – קראתי פעמיים עד שהבנתי את רובו. אני לא מתיימרת להביא פה הסבר מעמיק או דוגמאות לכל מה שהוא מביא שם אלא רק לוקחת את ההסבר שלו לשימוש ספציפי ב-scss שלי, ואת השאר – תקראו לבד 🙂

כשניסיתי להשתמש בפונקציה calc שהיא חלק מה-css ולא scss הקבצים לא רצו להתקמפל

margin-top: calc($nav-bar-height - 3.5rem);

לפי ההסבר של הוגו, calc איננה פונקציית scss ולכן כשהיא מתורגמת ל-css היא הופכת למחרוזת. ניתן יהיה לראות בחלון ה-inspect שהערך שמתקבל שם הוא- margin-top: calc($nav-bar-height - 3.5rem); מה שאומר שה-css לא יודע לחשב את זה. מה עושים? כדי שהמשתנה שלנו יתורגם ל-css אנחנו נעטוף אותו בסוגריים מסולסלות ונקדים לו # כדי שהקומפיילר ידע לקחת את המשתנה. וזה יראה ככה:

margin-top: calc(#{$nav-bar-height} - 3.5rem);
// will compile to:
margin-top: calc(5rem - 3.5rem);

שימוש ב-interpolation יכול להיות גם מאוד שימושי בהגדרות מדיה קוורי. לדוגמה:

$value: "min-width: 1200px";
body{
   width: 100%;
   @media (#{$value}) {
      width: 1200px;
   }
}


// will compile to:
body {
    width: 100%;
}
@media (min-width: 1200px) {
    body {
       width: 1200px;
    }
}

 

נוסף בצד

•  Sassmeister – כלי נחמד ושימושי, גם כדי לראות איך דברים יתקמפלו וגם מציג את זמן הקימפול.
• לא משהו שהתנסיתי בו (עדיין) ולכן הוא "בצד" – שימוש במשתני scss כדי שהתאימות לשפות (rtl-ltr) תהייה כמה שיותר קלה. פוסט קצר וקולע של אלעד שכטר.

 

אני חוזרת שוב למילותיי בראשית הפוסט – בטוחה שזה עדיין קצה קצהו של ה-scss, אבל איזה כיף – כל יום אני לומדת דברים חדשים. מבטיחה לשתף!