ייתכן שבקרוב תשתמש בהצהרות מקוננות בגיליונות סגנונות ה-CSS שלך, אבל תצטרך לשים לב לפרטים אם אתה עובר מ-Sass.
מאז שהושק, CSS סירב בעקשנות לתמוך בתחביר לבוררי קינון. האלטרנטיבה תמיד הייתה להשתמש במעבד קדם CSS כמו Sass. אבל היום, קינון הוא רשמית חלק מ-CSS מקורי. אתה יכול לנסות תכונה זו ישירות בדפדפנים מודרניים.
אם אתה עובר מסאס, תצטרך לקחת בחשבון את ההבדלים בין קינון מקומי לקינון Sass. ישנם כמה הבדלים עיקריים בין שתי תכונות הקינון, ומודעות אליהם היא קריטית אם אתה מבצע את המעבר.
אתה צריך להשתמש ב-"&" עם בוררי אלמנטים ב-CSS מקורי
CSS Nesting הוא עדיין טיוטה של מפרט, עם תמיכה משתנה בדפדפן. הקפד לבדוק אתרים כמו caniuse.com למידע עדכני.
הנה דוגמה לסוג הקינון שתראה ב-Sass, באמצעות תחביר SCSS:
.nav {
ul { display: flex; }
a { color: black; }
}
בלוק CSS זה מציין שכל רשימה לא מסודרת בתוך אלמנט עם א nav המחלקה מתיישרת כעמודה גמישה, דרך אחת של פריסת רכיבי HTML בדף. בנוסף, כל טקסט הקישור של העוגן בתוך אלמנטים עם א nav הכיתה צריכה להיות שחורה.
כעת, ב-CSS מקורי, סוג זה של קינון יהיה לא חוקי. כדי לגרום לזה לעבוד, תצטרך לכלול את סמל האמפרסנד (&) לפני האלמנטים המקוננים, כך:
.nav {
& ul { display: flex; }
& a { color: black; }
}הגרסה המוקדמת של קינון CSS לא אפשרה קינון של בוררי סוגים. שינוי אחרון פירושו שאינך צריך עוד להשתמש ב-"&", אך ייתכן שגרסאות ישנות יותר של Chrome ו-Safari עדיין לא תומכות בתחביר המעודכן הזה.
עכשיו אם השתמשת בבורר שמתחיל בסמל (למשל בורר מחלקה) ל למקד לחלק מסוים בדף, אתה יכול להשמיט את האמפרסנד. אז התחביר הבא יעבוד גם ב-CSS מקורי וגם ב-Sass:
.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}
אינך יכול ליצור בורר חדש באמצעות "&" ב-CSS מקורי
אחת התכונות שאתה כנראה אוהב ב-Sass היא היכולת לעשות משהו כזה:
.nav {
&-list { display: flex; }
&-link { color: black; }
}
קוד Sass זה מתחבר ל-CSS הגולמי הבא:
.nav-list {
display: flex;
}
.nav-link {
color: black;
}
ב-CSS מקורי, אינך יכול ליצור בורר חדש באמצעות "&". המהדר של Sass מחליף את ה-"&" באלמנט האב (למשל. .nav), אבל CSS מקורי יתייחס ל-"&" ולחלק שאחריו כשני בוררים נפרדים. כתוצאה מכך, הוא ינסה ליצור בורר תרכובות, שלא ייתן את אותה תוצאה.
דוגמה זו תעבוד ב-CSS מקורי, אם כי:
.nav {
&.nav-list { display: flex; }
&.nav-link { color: black; }
}
זה עובד מכיוון שהבורר הראשון זהה לזה nav.nav-list ב-CSS רגיל, והשני זהה ל nav.nav-link. הוספת רווח בין "&" לבורר תהיה שווה ערך לכתיבה nav .nav-list.
ב-CSS מקורי, אם אתה משתמש באמפרסנד כך:
.nav {
&__nav-list { display: flex; }
&__nav-link { color: black; }
}
זה אותו דבר כמו לכתוב את זה:
__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}
זה עשוי להפתיע אותך, בהתחשב בכך שגם __nav-list ו __נווט-קישור נמצאים בתוך .nav בוחר. אבל האמפרסנד למעשה מציב את האלמנטים המקוננים מול אלמנט האב.
הספציפיות יכולה להיות שונה
דבר נוסף שיש לשים לב אליו הוא ההשפעה על הספציפיות שאינה מתרחשת ב-Sass אלא מתרחשת בקינון CSS מקורי.
אז נניח שיש לך א ו אֵלֵמֶנט. עם ה-CSS הבא, an בכל אחד מהרכיבים האלה ישתמש בגופן סריף:
#main, article {
h2 {
font-family: serif;
}
}
הגרסה המורכבת של קוד Sass לעיל היא כדלקמן:
#mainh2,
articleh2 {
font-family: serif;
}
אבל אותו תחביר קינון ב-CSS מקורי יפיק תוצאה שונה, למעשה זהה ל:
:is(#main, article) h2 {
font-family: serif;
}
ה הוא() הבורר מטפל בחוקי הספציפיות באופן מעט שונה מקינון Sass. בעיקרון, הספציפיות של:הוא() מקבל שדרוג אוטומטי לפריט הספציפי ביותר ברשימת הארגומנטים שסופקו.
סדר האלמנטים עשוי לשנות את האלמנט הנבחר
קינון ב-CSS מקורי יכול לשנות לחלוטין את המשמעות של הבורר בפועל (כלומר בוחר אלמנט אחר לגמרי).
שקול את ה-HTML הבא, למשל:
<divclass="dark-theme">
<divclass="call-to-action">
<divclass="heading"> Hellodiv>
div>
div>
וה-CSS הבא:
body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
}
}
זו התוצאה אם אתה משתמש ב-Sass בתור מהדר CSS:
כעת בבלוק ה-HTML, אם הייתם מעבירים את עם הכיתה של ערכת נושא כהה בתוך זה של קריאה לפעולה, זה ישבור את הבורר (במצב Sass). אבל כאשר אתה עובר ל-CSS רגיל (כלומר ללא מעבד קדם CSS), הסגנונות ימשיכו לעבוד.
זה בגלל הדרך שבה ה :is() עובד מתחת למכסה המנוע. אז ה-CSS המקונן לעיל מתחבר ל-CSS הפשוט הבא:
.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}
זה מפרט את א .כּוֹתֶרֶת זה צאצא של שניהם .ערכת נושא כהה ו .קריאה לפעולה. אבל הסדר של אלה לא ממש משנה. כל עוד .כּוֹתֶרֶת הוא צאצא של .קריאה לפעולה ו .ערכת נושא כהה, זה עובד בכל אחד מהסדרים.
זהו מקרה קצה ולא משהו שתתקלו בו לעתים קרובות כל כך. אבל להבין את :is() הפונקציונליות הבסיסית של הבורר יכולה לעזור לך לשלוט על אופן פעולת הקינון ב-CSS. זה גם עושה איתור באגים ב-CSS שלך הרבה יותר קל.
למד כיצד להשתמש ב-Sass ב-React
מכיוון ש-Sass מבצע קומפילציה ל-CSS, אתה יכול להשתמש בו כמעט עם כל מסגרת ממשק משתמש. אתה יכול להתקין את מעבד הקדם CSS בפרויקטים של Vue, Preact, Svelte וכמובן-React. תהליך ההגדרה של Sass עבור כל המסגרות הללו הוא גם די פשוט.
היתרון הגדול ביותר בשימוש ב-Sass ב-React הוא שהוא מאפשר לך לכתוב סגנונות נקיים וניתנים לשימוש חוזר באמצעות משתנים ומיקסים. כמפתח React, הידיעה כיצד להשתמש ב-Sass תעזור לך לכתוב קוד נקי ויעיל יותר ותהפוך אותך למפתח טוב יותר באופן כללי.
