הדגל `!default` ב-SASS

מאמר זה מסביר את הדגל !default ב-SASS.

נסביר את הדגל !default בפירוט ונראה כיצד להשתמש בו עם דוגמאות מעשיות.

YouTube Video

הדגל !default ב-SASS

הדגל !default ב-SASS הוא כלי חשוב לשיפור המודולריות והיכולת לשימוש חוזר בגיליונות עיצוב. באמצעות דגל זה, ניתן להגדיר ערכי ברירת מחדל עבור משתנים, תוך מתן עדיפות לערכים שהוגדרו במקומות אחרים. כאן נסביר בפירוט את הדגל !default ונדגים את השימוש בו באמצעות דוגמאות מעשיות.

הדגל !default הוא תכונה ייחודית ל-SASS שבעזרתה ניתן להגדיר ערכי ברירת מחדל למשתנים. הוספת הדגל גורמת להתנהגות הבאה:.

• הגדרת ערכי ברירת מחדל הערך יוגדר רק אם המשתנה לא הוגדר במקום אחר.

• שליטה בעדיפויות אם המשתנה מוגדר כבר, הערך שלו לא יידרס.

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

דוגמה בסיסית

הקוד הבא מדגים שימוש בסיסי בדגל !default.

1// _variables.scss
2$primary-color: blue !default;

• הגדרת המשתנה הדיפולטי $primary-color באמצעות הדגל !default.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• ייבוא משתנים באמצעות @use והחלפת $primary-color באמצעות with.

פלט CSS

1body {
2    background-color: red;
3}

• בדוגמה זו, מכיוון ש-$primary-color מוגדר כ-red ב-main.scss, הערך blue שהוגדר ב-_variables.scss לא ישמש.

כאשר משתנה אינו מוגדר

אם המשתנה לא מוגדר ב-main.scss, ישמש ערך ברירת המחדל.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• מכיוון שהמשתנה מיובא ללא החלפה, הערך הדיפולטי blue עבור $primary-color שמוגדר ב-_variables.scss מיושם.

פלט CSS

1body {
2    background-color: blue;
3}

שימוש במודולים מקוננים

שימוש ב-!default במודולים מאפשר התאמה גמישה.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• הגדרת $primary-color ו-$button-color עם הדגל !default.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• ייבוא מודול variables והגדרת צבע של .button באמצעות משתנה $button-color.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• שימוש ב-@use עם with כדי להחליף את $button-color ל-orange, ושימוש במודול buttons.

פלט CSS

1.button {
2    color: orange;
3}

• בכך, מודולים מספקים ערכי ברירת מחדל ומכבדים את הגדרות המשתמש.

נקודות חשובות

בשימוש בדגל !default, יש להתייחס לנקודות הבאות:.

• בחירת ערכי ברירת מחדל מתאימים יש לבחור ערכי ברירת מחדל שמכסים מקרים נפוצים.

• עיצוב מכוון השתמשו בשמות משתנים עקביים והמנעו מהתנגשויות עם מודולים אחרים.

• בדיקת סדר השיבוצים כדי שהדגל !default יתפקד כראוי, עליכם לנהל כראוי את הסדר שבו משתנים נדרסים.

מצבים מעשיים

החלפת ערכות נושא

לדוגמה, בעת בניית ספרייה התומכת בערכות נושא, תוכלו להשתמש ב-!default כדי להגדיר ערכי ברירת מחדל הניתנים להתאמה.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• הגדרת $background-color ו-$text-color עם הדגל !default עבור ערכת הנושא, ויישומם על ה-body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• התאמת ערכת הנושא על ידי החלפת $background-color באמצעות @use ו-with.

פלט CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

רכיבים לשימוש חוזר

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

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• הגדרת צבעי רקע וטקסט דיפולטיים לכפתורים עם !default ויישום הסגנונות.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• התאמת צבע הכפתור על ידי החלפת $button-bg באמצעות @use ו-with.

פלט CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

סיכום הדגל !default

הדגל !default ב-SASS הוא כלי עוצמתי בעת בניית מודולים וספריות. הוא משפר את השימוש החוזר תוך שמירה על גמישות בהתאמה.

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

YouTube Video