استخدام Media Queries في SASS

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

كيفية تعريف Media Queries في SASS

في SASS، يمكنك استخدام Media Queries بطرق عديدة، مما يسمح لك بتنظيم الأكواد بشكل أفضل وأكثر قابلية للصيانة. واحدة من الطرق الشائعة هي استخدام توجيه @media مباشرة داخل العناصر. على سبيل المثال، يمكنك تعريف Media Query لتغيير لون النص بناءً على عرض الشاشة كما يلي:

```scss
.text {
    color: black;

    @media (max-width: 600px) {
        color: red;
    }
}
```

في المثال أعلاه، يتم تغيير لون النص إلى الأحمر إذا كان عرض الشاشة أقل من 600 بكسل. يتيح لك هذا النهج تضمين Media Queries مباشرة داخل تعريفات الأنماط الخاصة بالعناصر، مما يجعل الأكواد أكثر تنظيمًا وسهولة في القراءة.

استخدام Mixins لتبسيط Media Queries في SASS

تعتبر Mixins واحدة من الميزات القوية في SASS التي يمكنك استخدامها لتبسيط عملية كتابة Media Queries. باستخدام Mixins، يمكنك إنشاء وظيفة قابلة لإعادة الاستخدام تحتوي على Media Query معينة، ويمكنك استدعاء هذه الوظيفة في أي مكان تحتاجه في الأكواد. إليك مثال بسيط على كيفية إنشاء واستخدام Mixin للـ Media Queries:

```scss
@mixin respond-to($breakpoint) {
    @if $breakpoint == small {
        @media (max-width: 600px) { @content; }
    }
    @else if $breakpoint == medium {
        @media (max-width: 900px) { @content; }
    }
    @else if $breakpoint == large {
        @media (max-width: 1200px) { @content; }
    }
}

.container {
    width: 100%;

    @include respond-to(small) {
        width: 90%;
    }

    @include respond-to(medium) {
        width: 80%;
    }
}
```

في هذا المثال، يتم تعريف Mixin يسمى `respond-to` والذي يقبل متغيرًا يسمى `$breakpoint`. بناءً على قيمة هذا المتغير، يتم تطبيق Media Query المناسب. ثم يتم تضمين Mixin داخل عنصر `.container` لتغيير عرضه بناءً على حجم الشاشة. هذه الطريقة تجعل الكود أكثر مرونة وقابلية لإعادة الاستخدام، مما يساهم في تحسين كفاءة العمل وتقليل التكرار.