קומבינטורים בהשבה
מאמר זה מסביר על קומבינטורים בהשבה.
נבאר כיצד להשתמש בקומבינטורים בהשבה עם SASS ונספק דוגמת קוד שתסייע לך להבין צעד אחר צעד.
YouTube Video
קומבינטורים בהשבה
ב-SASS ניתן לכתוב ביעילות סלקטורים של CSS בהתבסס על קשרי הורה-ילד, אך יש לשים לב במיוחד להתייחס נכון לקומבינטורים כמו סלקטור צאצא וסלקטור שכן צמוד.
יסודות ההשבה
ב-SASS, על ידי השבת סלקטורים של ילד בתוך סלקטורים של הורה, ניתן לייצג את קשרי ההורה-ילד ב-CSS בצורה ברורה וקצרה.
דוגמה: השבה בסיסית
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}CSS מקומפל
1.nav ul li {
2 color: blue;
3}יחוס לסלקטור הורה (&)
ה-& ב-SASS משמש ליחוס לסלקטור ההורה הנוכחי.
שילוב קומבינטורים ו-&
על ידי שימוש ב-&, ניתן לבנות סלקטורים גמישים.
דוגמה
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}CSS מקומפל
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}קיצור עבור &
ב־SASS, כאשר מפעיל משמש בתחילת בורר, הבורר ההורה מוכנס באופן משתמע, ולכן אפשר להשמיט את ה־&.
מקרים שבהם ניתן להשמיט
לדוגמה, כאשר כותבים + .item, SASS מפרש זאת באופן פנימי כ־& + .item ומייצר אוטומטית את הצירוף עם הבורר ההורה.
דוגמה
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}CSS מקומפל
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}סקירה כללית של קומבינטורים
הקומבינטורים ב-CSS מגדירים את היחסים בין סלקטורים. הבאים הם הסוגים העיקריים של קומבינטורים.
-
סלקטור צאצא (רווח) סלקטור צאצא מכוון לכל האלמנטים הצאצאים הנמצאים בתוך אלמנט הורה. דוגמה:
.parent .child -
סלקטור ילד (
>) סלקטור ילד פונה רק לאלמנטים שהם ילדים ישירים. דוגמה:.parent > .child -
סלקטור שכן צמוד (
+) סלקטור שכן צמוד פונה לאח הסמוך הבא מיידית אחריו. דוגמה:.sibling1 + .sibling2 -
סלקטור אחים כללי (
~) סלקטור אחים כללי מכוון לכל האחים שמופיעים לאחר מכן. דוגמה:.sibling1 ~ .sibling2
כיצד להשתמש בקומבינטורים ב-SASS
סלקטור צאצא (רווח)
בהשבה של SASS, סלקטור הצאצא (רווח) מיושם כברירת מחדל.
דוגמה
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}CSS מקומפל
1.container .header .title {
2 font-size: 20px;
3}סלקטור ילד (> )
אם ברצונך להשתמש בסלקטור ילד, כתוב במפורש > בקוד SASS שלך.
דוגמה
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}CSS מקומפל
1.container > .header > .title {
2 font-size: 20px;
3}סלקטור שכן צמוד (+)
לעיצוב האח הצמוד הבא מיד, השתמש ב-+.
דוגמה
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}CSS מקומפל
1.item + .item {
2 margin-top: 10px;
3}סלקטור אחים כללי (~)
לעיצוב כל האחים הבאים באותו רמה, השתמש ב-~.
דוגמה
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}CSS מקומפל
1.alert ~ .alert {
2 border-top: 1px solid red;
3}פסאודו-מחלקות ופסאודו-אלמנטים בהשבה
ניתן לכתוב בקלות פסאודו-מחלקות ופסאודו-אלמנטים גם ב-SASS.
דוגמה
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}CSS מקומפל
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}דוגמה מעשית
להלן דוגמה לסגנון מורכב המשלב מספר קומבינטורים.
קוד SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}CSS מקומפל
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}סיכום
אם תבין נכון את ההשבה והקומבינטורים ב-SASS, תוכל לכתוב CSS תמציתי וקריא יותר.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.