كيفية استخدام Sass مع CSS Modules في Next.js باحتراف

يمنحك إطار Next.js دعماً مدمجاً لـ CSS Modules، ما يساعد على كتابة أنماط معزولة ومنظمة لكل مكوّن أو صفحة. لكن عندما تضيف إليه قدرات Sass، تصبح عملية إدارة الأنماط أكثر مرونة واحترافية، خاصة في المشاريع التي تتطلب قابلية توسع وتنظيماً أعلى.

في هذا الدليل العملي، ستتعرف على طريقة دمج Sass مع CSS Modules في Next.js، بداية من التثبيت وحتى استخدام المتغيرات وmixins لتحسين بنية ملفات التنسيق.

ما هي CSS Modules ولماذا تعد مهمة في Next.js؟

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

عند استيراد ملف CSS Module داخل مشروع يعتمد على React أو Next.js، يتم تحويل الأصناف إلى كائن يمكن الوصول إلى خصائصه مباشرة داخل الواجهة.

.title {
  color: blueviolet;
}

وعند استيراده داخل الملف البرمجي:

import styles from './my-styles.css'

يمكن تطبيق النمط بهذه الطريقة:

<h1 className={styles.title}>My Title</h1>

أهم الفوائد العملية لاستخدام CSS Modules:

• منع تعارض الأنماط بين الصفحات والمكوّنات.
• تسهيل صيانة ملفات التنسيق في المشاريع الكبيرة.
• جعل كل ملف تصميم مرتبطاً بشكل واضح بالجزء الذي يخدمه.
• تقليل تأثير الأنماط المتسلسلة غير المقصودة.

ما هو Sass وما الذي يضيفه فوق CSS؟

Sass هو امتداد متقدم للغة CSS يضيف مزايا قوية مثل المتغيرات، والدوال، وmixins، والتداخل، وأنواع قيم أكثر مرونة. هذه الأدوات تجعل كتابة الأنماط المعقدة أسهل وأكثر قابلية لإعادة الاستخدام.

على سبيل المثال، إذا أردت تخزين لون رئيسي في متغير واحد لتعديله لاحقاً من مكان واحد فقط، يمكنك فعل ذلك بالشكل التالي:

$color-primary: blueviolet;

.title {
  color: $color-primary;
}

وإذا احتجت إلى توليد درجة أغمق من اللون نفسه لحد سفلي مثلاً، يمكنك استخدام دالة مثل darken():

$color-primary: blueviolet;

.title {
  color: $color-primary;
  border-bottom: solid 2px darken($color-primary, 10);
}

ومن المزايا المفيدة أيضاً خاصية التداخل، التي تسمح بكتابة الأنماط بطريقة منطقية وأكثر قرباً من هيكل الواجهة:

$color-primary: blueviolet;
$color-secondary: cyan;

.title {
  color: $color-primary;
  border-bottom: solid 2px darken($color-primary, 10);

  strong {
    color: $color-secondary;
  }
}

ماذا سنبني في هذا الشرح؟

سننشئ مشروعاً جديداً باستخدام Next.js، ثم نضيف إليه Sass حتى نتمكن من استخدامه داخل ملفات CSS Modules. بعد ذلك سنطبق بشكل عملي:

1. إنشاء تطبيق جديد.
2. تثبيت Sass.
3. تحويل ملفات الأنماط من .css إلى .scss.
4. استخدام المتغيرات لتوحيد القيم.
5. إنشاء mixin لإدارة الأنماط المتجاوبة.

وإذا أردت الانتقال مباشرة إلى الكود، يمكنك مراجعة المشروع الأصلي على GitHub عبر الرابط التالي:

https://github.com/colbyfayock/next-sass-starter

الخطوة 0: إنشاء مشروع Next.js جديد

لبداية سريعة، يمكنك استخدام أداة Create Next App. انتقل إلى المجلد الذي تريد إنشاء المشروع فيه، ثم نفّذ الأمر التالي:

yarn create next-app my-next-sass-app

إذا كنت تفضل npm بدلاً من yarn، يمكنك استخدامه دون أي مشكلة.

بعد اكتمال التثبيت، شغّل بيئة التطوير عبر الأمر:

yarn dev

بعدها سيعمل المشروع غالباً على الرابط http://localhost:3000.

ستجد داخل المشروع ملفات تنسيق افتراضية، من بينها:

• /styles/globals.css
• /styles/Home.module.css

كما ستلاحظ أن الملف pages/index.js يستورد ملف Home.module.css، وهذا يعكس الدعم الافتراضي الذي يقدمه Next.js لـ CSS Modules.

على سبيل المثال، قد ترى سطراً شبيهاً بما يلي:

<h1 className={styles.title}>

وهذا يعني أن النمط title مرتبط بهذه الصفحة فقط، وليس ببقية أجزاء التطبيق.

الخطوة 1: تثبيت Sass داخل مشروع Next.js

رغم أن Next.js يدعم CSS بشكل ممتاز بشكل افتراضي، فإنه لا يفعّل Sass إلا بعد تثبيت الحزمة الخاصة به. والخبر الجيد أن العملية بسيطة جداً.

نفّذ الأمر التالي من داخل مجلد المشروع:

yarn add sass

بعد التثبيت، لن تلاحظ أي تغيير مرئي مباشر عند إعادة تشغيل المشروع، وهذا طبيعي تماماً. فالخطوة التالية هي البدء باستخدام ملفات Sass فعلياً.

الخطوة 2: استيراد ملفات Sass في Next.js

لاستخدام ميزات Sass، يجب أن تكون ملفات التنسيق بامتداد .sass أو .scss. في هذا الشرح سنعتمد الصيغة الأكثر شيوعاً وهي SCSS.

ابدأ بتعديل سطر الاستيراد داخل الملف pages/index.js ليصبح:

import styles from '../styles/Home.module.scss'

بعد ذلك سيظهر خطأ في التجميع، لأن الملف نفسه لا يزال يحمل الامتداد القديم .css. لحل المشكلة، أعد تسمية الملف:

/styles/Home.module.css

إلى:

/styles/Home.module.scss

بعد إعادة التحميل، سيعود التطبيق للعمل بشكل طبيعي.

وإذا رغبت في تطبيق الأمر نفسه على الأنماط العامة، يمكنك إعادة تسمية الملف /styles/globals.css وتحديث الاستيراد داخل /pages/_app.js.

الخطوة 3: استخدام متغيرات Sass في Next.js

بعد نجاح دمج Sass، يمكنك الاستفادة من المتغيرات لتوحيد القيم المستخدمة بشكل متكرر، مثل الألوان والمسافات وأحجام الخطوط.

أضف في أعلى الملف /styles/Home.module.scss التعريف التالي:

$color-primary: #0070f3;

هذا اللون هو اللون الافتراضي الشائع في الواجهة الابتدائية الخاصة بـ Next.js. بعد ذلك، استبدل القيم الثابتة التي تستخدم هذا اللون بالمتغير الجديد.

بدلاً من كتابة:

.title a {
  color: #0070f3;
}

اكتب:

.title a {
  color: $color-primary;
}

لن تلاحظ تغييراً بصرياً فورياً، لأن القيمة ما زالت نفسها.

لكن الآن يمكنك تغيير اللون من موضع واحد فقط. على سبيل المثال:

$color-primary: blueviolet;

وبمجرد الحفظ وإعادة التحميل، ستظهر الألوان الجديدة عبر العناصر المرتبطة بهذا المتغير.

الفائدة هنا ليست جمالية فقط، بل تنظيمية أيضاً، لأن المتغيرات:

• تقلل تكرار القيم داخل المشروع.
• تجعل التعديلات أسرع وأقل عرضة للأخطاء.
• تسهل إنشاء هوية بصرية متسقة.

الخطوة 4: استخدام mixins وعمليات الاستيراد العامة في Next.js

من الميزات القوية في Sass ما يعرف باسم mixins، وهي تعريفات قابلة لإعادة الاستخدام تشبه الدوال من حيث الفكرة. يمكن عبرها كتابة منطق تنسيقي متكرر مرة واحدة ثم استدعاؤه في أكثر من مكان.

في هذا المثال، سننشئ mixin خاصاً بالأنماط المتجاوبة باستخدام media query.

إنشاء ملف mixin مستقل

أنشئ ملفاً جديداً داخل المجلد /styles باسم:

/styles/_mixins.scss

استخدام الشرطة السفلية في بداية الاسم يعني أن الملف partial مخصص للاستيراد داخل ملفات أخرى.

بعدها استورده داخل الملف /styles/Home.module.scss:

@import "mixins";

لن تلاحظ تغييراً بصرياً حتى الآن، وهذا متوقع.

تعريف mixin للاستجابة

أضف داخل الملف _mixins.scss الكود التالي:

@mixin desktop() {
  @media (max-width: 600px) {
    @content;
  }
}

العنصر @content يعني أن أي تعليمات يتم تمريرها داخل mixin ستُدرج في هذا الموضع.

استخدام @include داخل الملف الرئيسي

إذا كان لديك مقطع تنسيقي خاص بالصنف .grid يعتمد على media query، يمكنك استبداله بالشكل التالي:

@include desktop() {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

عند تصغير نافذة المتصفح، ستلاحظ أن التنسيق المتجاوب ما زال يعمل كما ينبغي.

تحسين البنية باستخدام التداخل

يمكن كتابة الأنماط بصورة أكثر أناقة عبر وضع mixin داخل الصنف نفسه. على سبيل المثال، بدلاً من كتابة:

.footer {
  // Styles
}

.footer img {
  margin-left: 0.5rem;
}

يمكنك الاستفادة من التداخل:

.footer {
  // Styles

  img {
    margin-left: 0.5rem;
  }
}

والأمر نفسه ينطبق على الصنف .grid:

.grid {
  @include desktop() {
    width: 100%;
    flex-direction: column;
  }
}

هذه الطريقة تجعل الملف أكثر وضوحاً، لأن كل ما يتعلق بالصنف نفسه يصبح مجمعاً في مكان واحد.

قدرات إضافية يمنحها Sass داخل Next.js

ما سبق ليس سوى جزء بسيط من إمكانات Sass. وعند دمجه مع CSS Modules، تحصل على بيئة تنسيق قوية تناسب المشاريع الحديثة.

1. دوال الألوان

يوفر Sass مجموعة من الدوال الجاهزة مثل darken() وlighten()، ما يسمح بتوليد درجات لونية منسجمة دون الحاجة لحسابها يدوياً.

2. الدوال المخصصة

إلى جانب mixins، يمكنك أيضاً إنشاء دوال فعلية عبر functions لإرجاع قيم محسوبة بناءً على مُدخلات معينة، وهو أمر مفيد في الأنظمة التصميمية المتقدمة.

3. أنواع قيم إضافية

لا يقتصر الأمر على النصوص والأرقام فقط. يدعم Sass أنواعاً مثل Maps وLists، وهي مفيدة جداً عند بناء مكتبة تصميم أو نظام واجهات قابل للتوسع.

4. تنظيم أفضل على المدى الطويل

كلما نما المشروع، تصبح الحاجة إلى ملفات أنماط نظيفة وقابلة لإعادة الاستخدام أكبر. الجمع بين Next.js وSass وCSS Modules يحقق هذا الهدف بكفاءة واضحة.

أفضل الممارسات عند استخدام Sass مع CSS Modules في Next.js

• استخدم المتغيرات للقيم المشتركة مثل الألوان والمسافات.
• أنشئ ملفات partial مثل _mixins.scss و_variables.scss لفصل المسؤوليات.
• لا تفرط في التداخل داخل SCSS حتى لا يصبح الملف معقداً عند التوسع.
• اجعل أسماء الأصناف واضحة ومحددة بحسب الغرض الوظيفي.
• استفد من عزل CSS Modules لتقليل الحاجة إلى أسماء طويلة جداً.

الخلاصة التقنية

يُعد دمج Sass مع CSS Modules في Next.js خياراً ذكياً لأي مشروع يحتاج إلى أنماط قابلة للتوسع وسهلة الإدارة. فبينما تمنحك CSS Modules عزلاً فعالاً للأنماط، يضيف Sass طبقة إنتاجية قوية عبر المتغيرات وmixins والتداخل. النتيجة النهائية هي شيفرة أنظف، وصيانة أسهل، وتجربة تطوير أكثر احترافية، خصوصاً عند بناء واجهات حديثة تنمو بمرور الوقت.