@media والتصميم المتجاوب مع SASS

مقدمة إلى التصميم المتجاوب مع SASS

التصميم المتجاوب هو ممارسة إنشاء مواقع ويب تتكيف مع أحجام الشاشات المختلفة والأجهزة وسياقات العرض. توفر SASS ميزات قوية تجعل كتابة وإدارة CSS المتجاوب أسهل بكثير من خلال استعلامات الوسائط المتداخلة والـ mixins القابلة لإعادة الاستخدام وإدارة نقاط التوقف المنهجية.

لماذا تحسّن SASS التصميم المتجاوب

تعزز SASS التطوير المتجاوب من خلال:

• تداخل استعلامات الوسائط: كتابة قواعد @media داخل المحددات لتنظيم أفضل
• نقاط توقف قابلة لإعادة الاستخدام: تعريف نقاط التوقف مرة واحدة واستخدامها في كل مكان
• Mixins مع @content: إنشاء mixins متجاوبة تقبل كتل المحتوى
• الحسابات الرياضية: حساب التخطيطات السائلة والتحجيم النسبي
• مبادئ DRY: القضاء على كود استعلامات الوسائط المتكررة

تداخل @media داخل المحددات

النهج التقليدي لـ CSS

في CSS العادي، يجب أن تحتوي استعلامات الوسائط على محددات، مما يؤدي إلى التكرار:

/* CSS عادي - متكرر */
.sidebar {
  width: 100%;
  padding: 1rem;
}

@media (min-width: 768px) {
  .sidebar {
    width: 300px;
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .sidebar {
    width: 350px;
    padding: 2rem;
  }
}

نهج SASS المتداخل

تتيح لك SASS تداخل قواعد @media داخل المحددات، مما يحافظ على الأنماط المرتبطة معاً:

// SASS - منظمة وقابلة للصيانة
.sidebar {
  width: 100%;
  padding: 1rem;

  @media (min-width: 768px) {
    width: 300px;
    padding: 1.5rem;
  }

  @media (min-width: 1024px) {
    width: 350px;
    padding: 2rem;
  }
}

// إخراج CSS المجمع:
// .sidebar { width: 100%; padding: 1rem; }
// @media (min-width: 768px) {
//   .sidebar { width: 300px; padding: 1.5rem; }
// }
// @media (min-width: 1024px) {
//   .sidebar { width: 350px; padding: 2rem; }
// }

أمثلة تداخل معقدة

.card {
  background: white;
  padding: 1rem;
  margin-bottom: 1rem;

  .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;

    @media (min-width: 768px) {
      font-size: 1.5rem;
    }
  }

  .card-content {
    font-size: 1rem;
    line-height: 1.5;
  }

  @media (min-width: 768px) {
    padding: 1.5rem;
    display: flex;
    gap: 1rem;

    .card-title {
      margin-bottom: 0.75rem;
    }
  }

  @media (min-width: 1024px) {
    padding: 2rem;
    margin-bottom: 2rem;
  }
}

بناء نظام نقاط التوقف

تعريف متغيرات نقاط التوقف

إنشاء نظام مركزي لإدارة نقاط التوقف:

// نهج متغير بسيط
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

.container {
  width: 100%;

  @media (min-width: $breakpoint-md) {
    max-width: 720px;
  }

  @media (min-width: $breakpoint-lg) {
    max-width: 960px;
  }

  @media (min-width: $breakpoint-xl) {
    max-width: 1140px;
  }
}

نظام خريطة نقاط التوقف

استخدام خريطة لإدارة نقاط التوقف بشكل أكثر مرونة:

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// الحصول على قيمة نقطة التوقف
@function breakpoint($name) {
  @if map-has-key($breakpoints, $name) {
    @return map-get($breakpoints, $name);
  }

  @warn "Breakpoint '#{$name}' not found in $breakpoints map.";
  @return null;
}

// الاستخدام
.element {
  width: 100%;

  @media (min-width: breakpoint(md)) {
    width: 750px;
  }
}

إنشاء Mixins متجاوبة

Mixin متجاوب أساسي

إنشاء mixin يولد استعلامات الوسائط مع @content:

@mixin respond-above($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin respond-below($breakpoint) {
  @media (max-width: $breakpoint - 1px) {
    @content;
  }
}

// الاستخدام
.navigation {
  display: none;

  @include respond-above(768px) {
    display: flex;
    justify-content: space-between;
  }
}

.mobile-menu {
  display: block;

  @include respond-above(768px) {
    display: none;
  }
}

نظام Mixin نقاط التوقف المتقدم

بناء نظام شامل مع نقاط توقف مسماة:

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// الاستجابة فوق نقطة التوقف (الهاتف أولاً)
@mixin respond-above($name) {
  $breakpoint: map-get($breakpoints, $name);

  @if $breakpoint {
    @if $breakpoint > 0 {
      @media (min-width: $breakpoint) {
        @content;
      }
    } @else {
      @content; // لا يوجد استعلام وسائط لـ xs
    }
  } @else {
    @warn "Breakpoint '#{$name}' not found.";
  }
}

// الاستجابة أسفل نقطة التوقف (سطح المكتب أولاً)
@mixin respond-below($name) {
  $breakpoint: map-get($breakpoints, $name);

  @if $breakpoint {
    @media (max-width: $breakpoint - 1px) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$name}' not found.";
  }
}

// الاستجابة بين نقطتي توقف
@mixin respond-between($min, $max) {
  $min-bp: map-get($breakpoints, $min);
  $max-bp: map-get($breakpoints, $max);

  @if $min-bp and $max-bp {
    @media (min-width: $min-bp) and (max-width: $max-bp - 1px) {
      @content;
    }
  }
}

// أمثلة استخدام
.component {
  padding: 1rem;

  @include respond-above(md) {
    padding: 1.5rem;
  }

  @include respond-above(lg) {
    padding: 2rem;
  }

  @include respond-between(sm, md) {
    background: lightblue;
  }
}

الهاتف أولاً مقابل سطح المكتب أولاً

نهج الهاتف أولاً

البدء بأنماط الهاتف المحمول والتحسين تدريجياً للشاشات الأكبر:

// الهاتف أولاً: أنماط أساسية للهاتف، تحسين للأعلى
.grid {
  // الهاتف المحمول (افتراضي)
  display: block;

  // الجهاز اللوحي وما فوق
  @include respond-above(md) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  // سطح المكتب وما فوق
  @include respond-above(lg) {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  // سطح المكتب الكبير وما فوق
  @include respond-above(xl) {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

نهج سطح المكتب أولاً

البدء بأنماط سطح المكتب والتبسيط تدريجياً للشاشات الأصغر:

// سطح المكتب أولاً: أنماط أساسية لسطح المكتب، تبسيط للأسفل
.grid {
  // سطح المكتب (افتراضي)
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;

  // أسفل سطح المكتب الكبير
  @include respond-below(xl) {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  // أسفل سطح المكتب
  @include respond-below(lg) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  // أسفل الجهاز اللوحي
  @include respond-below(md) {
    display: block;
  }
}

بناء نظام نقاط توقف كامل

معمارية متجاوبة احترافية

// _breakpoints.scss
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

// Mixins نقاط التوقف
@mixin respond-above($name) {
  $bp: map-get($breakpoints, $name);
  @if $bp {
    @if $bp == 0 {
      @content;
    } @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
}

@mixin respond-below($name) {
  $bp: map-get($breakpoints, $name);
  @if $bp {
    @media (max-width: $bp - 1px) {
      @content;
    }
  }
}

@mixin respond-between($min, $max) {
  $min-bp: map-get($breakpoints, $min);
  $max-bp: map-get($breakpoints, $max);
  @if $min-bp and $max-bp {
    @media (min-width: $min-bp) and (max-width: $max-bp - 1px) {
      @content;
    }
  }
}

@mixin respond-only($name) {
  @if $name == xs {
    @include respond-below(sm) { @content; }
  } @else {
    $keys: map-keys($breakpoints);
    $index: index($keys, $name);
    $next-name: nth($keys, $index + 1);
    @include respond-between($name, $next-name) { @content; }
  }
}

// الاستخدام العملي
.header {
  padding: 1rem;
  background: white;

  @include respond-above(md) {
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .logo {
    height: 40px;

    @include respond-above(md) {
      height: 50px;
    }
  }

  .nav {
    display: none;

    @include respond-above(lg) {
      display: flex;
      gap: 2rem;
    }
  }

  .mobile-toggle {
    display: block;

    @include respond-above(lg) {
      display: none;
    }
  }
}

دمج شروط وسائط متعددة

استعلامات وسائط معقدة

دمج شروط متعددة باستخدام and وor وnot:

// أنماط خاصة بالاتجاه
.gallery {
  @media (orientation: landscape) and (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  @media (orientation: portrait) {
    display: flex;
    flex-direction: column;
  }
}

// شاشات عالية الدقة
.icon {
  background-image: url("icon.png");

  @media (min-resolution: 2dppx) {
    background-image: url("icon@2x.png");
  }
}

// أنماط الطباعة
.page {
  @media print {
    color: black;
    background: white;

    .no-print {
      display: none;
    }
  }
}

// دعم الوضع الداكن
.theme {
  @media (prefers-color-scheme: dark) {
    background: #222;
    color: #eee;
  }
}

// تفضيل الحركة المنخفضة
.animated-element {
  transition: all 0.3s ease;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

استعلامات الحاويات مع SASS

دعم استعلامات الحاويات الحديثة

تسمح استعلامات الحاويات CSS للعناصر بالاستجابة لحجم الحاوية الأصلية:

// تعريف الحاوية
.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

// mixin استعلام الحاوية
@mixin container-above($name, $width) {
  @container #{$name} (min-width: #{$width}) {
    @content;
  }
}

// الاستخدام
.card {
  padding: 1rem;

  @include container-above(card-grid, 400px) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  @include container-above(card-grid, 600px) {
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

أفضل الممارسات

نصائح تنظيم استعلامات الوسائط

• احتفظ بالأنماط المرتبطة معاً: تداخل استعلامات الوسائط داخل المحددات بدلاً من إنشاء ملفات منفصلة
• استخدم نقاط توقف مسماة: تجنب الأرقام السحرية؛ استخدم أسماء متغيرات ذات معنى
• فضّل الهاتف أولاً: ابدأ بالهاتف المحمول وحسّن للشاشات الأكبر
• حدد نقاط التوقف: استخدم 4-6 نقاط توقف كحد أقصى؛ المزيد يخلق تعقيداً
• اختبر على أجهزة حقيقية: لا تعتمد فقط على أدوات تطوير المتصفح
• ضع المحتوى في الاعتبار: دع المحتوى يحدد نقاط التوقف، وليس الأجهزة

الملخص

في هذا الدرس، تعلمت:

• تداخل استعلامات @media داخل المحددات لتنظيم أفضل
• كيف "تفقاعة" SASS استعلامات الوسائط المتداخلة في CSS المجمع
• إنشاء أنظمة نقاط توقف مركزية مع المتغيرات والخرائط
• بناء mixins متجاوبة قابلة لإعادة الاستخدام مع @content
• نهج الهاتف أولاً مقابل سطح المكتب أولاً ومقايضاتهم
• إنشاء أنظمة mixin نقاط توقف كاملة (فوق، أسفل، بين، فقط)
• دمج شروط وسائط متعددة (الاتجاه، الدقة، التفضيلات)
• استعلامات الحاويات الحديثة مع SASS
• أفضل الممارسات لتنظيم الكود المتجاوب

تحول SASS التصميم المتجاوب من مهمة متكررة إلى نظام أنيق وقابل للصيانة. من خلال الاستفادة من استعلامات الوسائط المتداخلة والـ mixins القابلة لإعادة الاستخدام وإدارة نقاط التوقف المركزية، يمكنك إنشاء تخطيطات متجاوبة متطورة بكود أقل بكثير وتنظيم أفضل من CSS العادي.