میکسین breakpoint در SCSS با @content؛ media queryهای تمیز و قابل‌نگه‌داری

نوشتن @media (min-width: 768px) در هر فایل یعنی تکرار عدد و دردسر تغییر بعدی. میکسینی که بلوک را با @content دریافت می‌کند این مشکل را حل می‌کند.

میکسین

@use "sass:map";

$breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
);

@mixin up($name) {
  @media (min-width: map.get($breakpoints, $name)) {
    @content;
  }
}

استفاده

.nav {
  display: none;

  @include up("md") {
    display: flex;
    gap: 1rem;
  }
}

رویکرد «موبایل‌اول» یعنی استایل پایه برای صفحهٔ کوچک است و میکسین فقط از یک عرض به بالا چیزی اضافه می‌کند. اگر نیاز دارید یک بازه را هم پوشش دهید، یک میکسین between($min, $max) بنویسید.

• نام breakpointها را به‌جای عدد (مثلاً «tablet») نگذارید؛ نام‌های اندازه‌ای مثل md و lg با دستگاه خاصی گره نمی‌خورند.
• اگر از container query استفاده می‌کنید، می‌توانید میکسین مشابهی برای @container بسازید.