החלפת מדיה קוורי במיקסין פשוט

אחד הדברים הכי נוחים בשימוש ב Sass, הוא היכולת להשתמש במיקסינים (Mixins) – קטעי קוד שמוגדרים פעם אחת, ואפשר להוסיף אותם בכל מקום בו אתם זקוקים להם באמצעות פקודה פשוטה. תחשבו על כל מקטעי הקוד שאתם חוזרים עליהם לא מעט פעמים במהלך בניית האתרים שלכם, ותבינו כמה השימוש במיקסינים יכול להפוך את העבודה שלכם לפשוטה יותר.

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

אנחנו מתחילים בכך שנגדיר מיקסין חדש בשם mq, שמקבל משתנה בשם size, ובתוכו נכניס את המדיה קוורי שלנו בצורה כזאת:

@mixin mq($size) {
  @media screen and (min-width: $size) {
    @content;
  }
}

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

h1 {
  font-size: 22px;
  
  @include mq(1024px) {
    font-size: 35px;
  }
}

אם אתם לא רגילים לשימוש ב Sass, זה יכול להיראות לכם מוזר במבט ראשון, כי המדיה קוורי מוגדרת בתוך סלקטור ולא מחוצה לא, אבל בקובץ ה CSS הסופי שלכם, התוצאה תראה כך:

h1 {
  font-size: 22px;
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: 35px;
  }
}

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

$bp-small: 480px;
$bp-medium: 780px;
$bp-large: 1024px;

h1 {
  font-size: 22px;
  
  @include mq($bp-large) {
    font-size: 35px;
  }
}

תודו שזה הרבה פחות מסובך ממה שחשבתם.

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

אבל יכול להיות שזה כבר עניין למדריך אחר.