SASS `@at-root`

מאמר זה מסביר את @at-root של SASS.

נכסה הכול, מהשימוש הבסיסי ב-@at-root ועד דוגמאות מתקדמות, צעד אחר צעד.

YouTube Video

על @at-root של SASS

@at-root היא הוראה שמסופקת על ידי SASS ומשמשת להעברת סלקטורים או מאפיינים מקוננים מהקינון הנוכחי אל תחום האב. באמצעות תכונה זו ניתן לשלוט בעומק הקינון ולהפיק את קוד ה-CSS הרצוי ביעילות גבוהה יותר.

שימוש בסיסי ב-@at-root

הקינון של SASS משפר את קריאות הקוד, אך קינון עמוק מדי עלול לגרום להפקת CSS לא מכוון. באמצעות @at-root ניתן להוציא מקטעי קוד מסוימים ממבנה הקינון.

תחביר בסיסי

1@at-root {
2  // Code to be output at the parent (root) scope
3}

שימוש לדוגמה

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

CSS שנוצר

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• בזכות @at-root, .nav-item מופק מחוץ ל-.nav.

@at-root בתוך סלקטורים מקוננים

גם בתוך קינון עמוק, שימוש ב-@at-root מאפשר להעביר סלקטורים מסוימים לרמת השורש. כך ניתן להפיק CSS מבוקר גם בתוך מבנים מורכבים.

שימוש לדוגמה

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

CSS שנוצר

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• בעזרת @at-root, .card-title מופק מחוץ ל-.card-header.

@at-root עם ארגומנטים

על ידי ציון ארגומנטים ניתן לשלוט ב-@at-root בגמישות רבה יותר.

הארגומנט without

כאשר משתמשים בארגומנט without, הפלט מתעלם מהתחומים שצוינו. במילים אחרות, ניתן להסיר כללי הורה או שאילתות מדיה.

שימוש לדוגמה

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

CSS שנוצר

1.nav__item {
2  color: red;
3}

• במקרה זה, @at-root (without: media) מוציא מהכלל את תחום שאילתת המדיה, ו-.nav__item מופק ברמת השורש.

הארגומנט with

שימוש ב-with שומר בפלט רק את התחומים שצוינו. שימושי כאשר רוצים להפיק לשורש תוך שמירה על תחומים מסוימים.

שימוש לדוגמה

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

CSS שנוצר

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) מעביר את הסלקטור לשורש תוך שמירה על מבנה שאילתת המדיה.

ציון תנאים מרובים

ניתן גם לציין מספר תחומי גישה בו-זמנית, מופרדים ברווחים.

שימוש לדוגמה

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

CSS שנוצר

1.global-style {
2  color: green;
3}

• בדוגמה זו, גם rule (סלקטורים רגילים) וגם media (שאילתות מדיה) מוחרגים, ולכן .global-style אינו שייך לשום תחום ומופק כולו ברמת השורש. זה שימושי כאשר רוצים להגדיר במכוון סגנונות גלובליים גם בתוך קינון מורכב.

שילוב עם שאילתות מדיה

באמצעות @at-root ניתן להוציא סגנונות ברמת השורש מתוך שאילתות מדיה. זה מאפשר להגדיר עיצוב רספונסיבי ברמת הרכיב.

שימוש לדוגמה

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

CSS שנוצר

1.container-large {
2  width: 80%;
3}

• באמצעות @at-root ניתן להפיק גם מתוך שאילתות מדיה סגנונות ברמת השורש. כך ניתן להגדיר בקלות סגנונות גלובליים עצמאיים לכל נקודת שבירה.

מקרי שימוש עבור @at-root

@at-root שימושי כאשר רוצים להפיק סגנונות ברמת השורש בתנאים מסוימים. זה מועיל במיוחד בעת טיפול בשאילתות מדיה או בסגנונות ספציפיים לערכת נושא בתוך רכיבים.

הפרדת רכיבים וערכות נושא

בעזרת @at-root ניתן ליצור מחלקות גלובליות עצמאיות אפילו מתוך שאילתות מדיה. כך קל יותר לארגן ערכות נושא ומצבים לכל רכיב.

שימוש לדוגמה

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

CSS שנוצר

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• בדוגמה זו, תוך כדי הגדרת סגנונות לנושא הכהה בתוך .card, @at-root יוצר מחלקה נפרדת בשם .card-dark. כך ניתן להחליף מחלקות בגמישות בין ערכות נושא שונות.

הערות

בעת שימוש ב-@at-root, יש לשים לב לנקודות הבאות.

1. הימנעו משימוש מופרז @at-root הוא כלי חזק, אך שימוש יתר בו עלול לטשטש את כוונת הקינון שלכם.

2. הבהירו את הכוונה השארת הערות לגבי הסיבה לשימוש ב-@at-root מקלה על מפתחים אחרים להבין.

3. שימו לב לעקביות התחומים העברת הפלט לשורש יכולה לשנות את התלות בין הסגנונות. היו ברורים לגבי אילו אלמנטים זה חל עליהם.

4. שלבו עם תכונות אחרות של SASS שילוב @at-root עם @mixin ו-@function מאפשר עיצוב CSS גמיש יותר.

סיכום

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video