כיצד להשתמש במשתני CSS כמו מקצוען

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

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

כיצד להגדיר ולהשתמש במשתני CSS

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

קח את הדוגמה הבאה של קובץ HTML וקובץ CSS שאינם משתמשים במשתני CSS.

HTML:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>משתני CSS - וריאציות לחצניםכותרת>
<קישורrel="גיליון סגנונות"href="Variables.css" />
רֹאשׁ>
<גוּף>
<div>
<h1>משתני CSSh1>
<div>
מעמד="btn sub-primary">ראשי</button>
מעמד="btn">משנית</button>
div>
div>
גוּף>
html>

CSS:

.btn {
ריפוד: 1rem 1.5 רמ;
 רקע: שקוף;
 משקל גופן: 700;
 צבע אדום;
}

כך הדף שלך אמור להיראות:

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

כמו רוב שפות התכנות, עליך לאתחל ולהחליף משתני CSS.

כדי לאתחל משתנה CSS, הקדמת שם המשתנה במקפים כפולים:

:שורש{
/*משתנה CSS*/
--שם_משתנה: ערך;
}

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

כדי להחליף את המשתנה בסגנון ה-CSS שלך, תשתמש ב- var() תכונה:

:שורש {
/*משתנה CSS*/
 --יְסוֹדִי: #900c3f;
 --מִשׁנִי: #ff5733;
}
.btn {
ריפוד: 1rem 1.5 רמ;
 רקע: שקוף;
 משקל גופן: 700;
 צֶבַע: var(--יְסוֹדִי);
 צבע רקע: var(--מִשׁנִי);
}
.sub-primary {
 צֶבַע: var(--מִשׁנִי);
 צבע רקע: var(--יְסוֹדִי);
}

בורר השורש מכיל שני משתנים: --יְסוֹדִי ו --מִשׁנִי. שני המשתנים מוחלפים לאחר מכן ב- .btn הכיתה כצבע וכצבע רקע בהתאמה.

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

ה var() נכס יכול גם לקחת טיעון שני. ארגומנט זה פועל כערך חזרה לארגומנט הראשון במצב בו הראשון אינו מוגדר או אינו חוקי.

לדוגמה:

:שורש {
 --יְסוֹדִי: #900c3f;
 --מִשׁנִי: #ff5733;
}
.btn {
ריפוד: 1rem 1.5 רמ;
 רקע: שקוף;
 משקל גופן: 700;
 צֶבַע: var(--ראשי, כחול);
}

בדוגמה זו, החלף את --יְסוֹדִי משתנה לתוך צֶבַע סִגְנוֹן. אם מסיבה כלשהי, ערך זה נכשל, גיליון הסגנונות ישתמש בערך השני כחלופה. אתה יכול גם להשתמש במשתנה CSS אחר כערך חזרה.

מניפולציה ועקיפה של משתני CSS עם JavaScript

מניפולציה של משתני CSS באמצעות JavaScript יכולה להיות דרך רבת עוצמה לשנות את המראה והתחושה של האתר שלך תוך כדי תנועה. באמצעות JavaScript, אתה יכול לעדכן את הערכים של משתנים אלה ולראות את השינויים המשתקפים באתר שלך.

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

הנה דוגמה כיצד להשתמש ב-JavaScript כדי לעדכן את הערך של משתנה CSS.

HTML:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>משתני CSS - וריאציות לחצניםכותרת>
<קישורrel="גיליון סגנונות"href="Variables.css" />
<תַסרִיט>
פוּנקצִיָהלשנות צבע() {
// קבל את האלמנט שעליו אתה רוצה לשנות את המשתנה
const myElement = מסמך.querySelector(":שורש");
// קבל את הערך הנוכחי של המשתנה
לתת currentValue = getComputedStyle (myElement).getPropertyValue(
"--מִשׁנִי"
 );
 // מַעֲרֶכֶת ה חָדָשׁערךל ה מִשְׁתַנֶה
myElement.סִגְנוֹן.setProperty("--מִשׁנִי", "#DAF7A6");
 }
תַסרִיט>
רֹאשׁ>
<גוּף>
<div>
<h1>משתני CSSh1>
<div>
מעמד="btn sub-primary" onclick="changeColor()">
 יְסוֹדִי
לַחְצָן>
מעמד="btn">משנית</button>
div>
div>
גוּף>
html>

CSS:

:שורש {
 --יְסוֹדִי: #900c3f;
 --מִשׁנִי: #ff5733;
}
.btn {
ריפוד: 1rem 1.5 רמ;
 רקע: שקוף;
 משקל גופן: 700;
}
.sub-primary {
 צֶבַע: var(--יְסוֹדִי);
 צבע רקע: var(--מִשׁנִי);
}

בקוד JavaScript זה, ה changeColor() הפונקציה מעדכנת את צבע הכפתור הראשון כאשר המשתמש לוחץ עליו.

באמצעות שיטות חציית DOM, תוכל לגשת למחלקות או לבוררים שהוחלו במסמך ה-HTML שלך ולתפעל את הערכים.

לפני הלחיצה על הכפתור:

לאחר לחיצה על הכפתור:

אתה יכול גם להשתמש ב-JavaScript כדי ליצור משתני CSS חדשים או להסיר אותם לגמרי.

לדוגמה:

// לִיצוֹר א חָדָשׁמִשְׁתַנֶה
מסמך.documentElement.style.setProperty('--צבע חדש', 'כְּחוֹל');
// הסר משתנה
מסמך.documentElement.style.removeProperty('--צבע חדש');

שימוש במשתני CSS עם Preprocessors

שימוש במשתנים בתוך טכנולוגיית החזית הושג בתחילה עם מעבדי CSS כמו SASS, LESS וסטילוס.

מטרת מעבדי הקדם CSS היא לפתח קוד המרחיב את היכולות הבסיסיות של CSS סטנדרטי. לאחר מכן יש להרכיב את הקוד הזה לתוך CSS סטנדרטי כדי שהדפדפן יבין, בדומה כיצד TypeScript עובד עם JavaScript.

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

אתה יכול להגדיר משתנה SASS $ עיקרי-צבע והשתמש בו כדי להגדיר את הערך של משתנה CSS. לאחר מכן, השתמש במשתנה CSS במחלקה בסגנון רגיל.

אתה יכול גם להשתמש בפונקציות SASS כדי לתפעל את הערכים של משתני CSS.

לדוגמה:

:שורש {
 --primary: $main-color;
 --משנית: להבהיר(var(--יְסוֹדִי), 20%);
}
.btn {
 צֶבַע: var(--יְסוֹדִי);
 צבע רקע: var(--מִשׁנִי);
}

כאן, פונקציית SASS לְהִתְבַּהֵר() עושה מניפולציות על הערך של --יְסוֹדִי כדי לקבל ערך עבור --מִשׁנִי.

שים לב שמשתני SASS אינם נגישים באמצעות JavaScript. אז אם אתה צריך לתפעל את הערכים של המשתנים שלך בזמן ריצה, עליך להשתמש במשתני CSS.

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

טיפים לשימוש במשתני CSS בפיתוח אתרים

להלן מספר טיפים חשובים שיעזרו לך להשתמש במשתני CSS בצורה טובה יותר.

התחל עם אמנת שמות ברורה

בחר מוסכמות שמות עבור המשתנים שלך שתקל על ההבנה והשימוש בהם. לדוגמה, השתמש בקידומת כגון --צֶבַע- עבור משתני צבע או --מרווח- עבור משתני מרווחים.

השתמש במשתנים בשאילתות מדיה כדי להקל על התאמת העיצוב שלך לגדלי מסך שונים.

נצל את האופי המדורג של CSS

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

השתמש במשתני CSS בזהירות

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

בדוק את המשתנים שלך

משתני CSS הם דרך ייחודית לכתוב קוד ברור וניתן לתחזוקה בגיליון הסגנונות שלך.

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