איך להפחית את החזרות על סגנונות באמצעות פונקציות CSS

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

הכלל @function ב-CSS מאפשר לכם להכיל את הלוגיקה הזו בפונקציות עם פרמטרים שניתן לעשות בהן שימוש חוזר, וכך לשמור על ה-CSS בצורה עקבית, קלה לתחזוקה ו-DRY (Don't Repeat Yourself).

התחביר של @function

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

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

מושגים מרכזיים

• פרמטרים: חייבים להתחיל במקף כפול (--).
• ערכי ברירת מחדל: אפשר לספק ערכי ברירת מחדל באמצעות נקודתיים (:).
• תוצאה: המאפיין result קובע את הערך שהפונקציה מחזירה. ה-result האחרון שהוצהר בגוף הפונקציה הוא זה שייבחר.
• היקף: הפרמטרים והמשתנים שמוגדרים בתוך הפונקציה הם בהיקף מקומי.
• סוגים: אתם יכולים לדרוש שהפרמטרים והערך המוחזר יתאימו לסוג CSS עם סימון סוגריים מרובעים (למשל, <color>) ולאפשר כמה סוגים באמצעות הפונקציה type (למשל, type(<number> | <percentage>)).

דוגמאות מעשיות

1. אסימונים של מערכת העיצוב (מעברי צבע)

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

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. לוגיקה של פריסה מותנית

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

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

שיטות מומלצות

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

אסטרטגיות חלופיות

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

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

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