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

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

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

ما هي CSS Modules ولماذا تُستخدم في Next.js؟

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

عند استيراد ملف الأنماط داخل مشروع مبني بـ React أو Next.js، يتم تحويل أسماء الأصناف إلى كائن يمكن الوصول إلى خصائصه من خلال styles. بهذه الطريقة، يصبح تطبيق الأنماط على العناصر أكثر أماناً ووضوحاً.

.title {
  color: blueviolet;
}

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

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

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

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

Sass هو امتداد للغة CSS يضيف إمكانات متقدمة تساعد على كتابة أنماط أكثر تنظيماً ومرونة. من أهم هذه الإمكانات:

• استخدام المتغيرات مثل $color-primary لتوحيد القيم المتكررة.
• إنشاء mixins لإعادة استخدام مجموعات من القواعد.
• الاستفادة من الدوال المدمجة مثل darken() وlighten().
• كتابة الأنماط المتداخلة بشكل منطقي داخل المحددات المرتبطة بها.

على سبيل المثال، بدلاً من تكرار اللون نفسه في أكثر من موضع، يمكن تعريفه في متغير واحد ثم إعادة استخدامه أينما نحتاج.

$color-primary: blueviolet;

.title {
  color: $color-primary;
}

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

$color-primary: blueviolet;

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

كما يتيح Sass كتابة أنماط متداخلة، وهو ما يجعل الملف أقرب إلى البنية المنطقية للواجهة:

$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. بعد ذلك سنرى كيف يمكن استيراد ملفات SCSS واستخدام المتغيرات وmixins داخل CSS Modules لتطوير واجهة أكثر قابلية للتوسّع.

إذا كنت تفضّل الانتقال مباشرة إلى الشيفرة، يمكنك مراجعة المشروع المرجعي على GitHub عبر الرابط التالي:

مشروع انطلاقة لاستخدام Sass مع Next.js

الخطوة 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 ستلاحظ أنه يستورد ملف الأنماط الخاص بالصفحة، ثم يستخدم الكائن styles لتطبيق الأصناف على عناصر React.

<h1 className={styles.title}>

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

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

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

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

yarn add sass

بعد التثبيت، أعد تشغيل خادم التطوير إذا لزم الأمر. غالباً لن تلاحظ أي تغيير بصري مباشر، وهذا أمر طبيعي، لأننا لم نبدأ بعد باستخدام ملفات .scss أو .sass.

الخطوة 2: استيراد ملفات Sass داخل التطبيق

لكي تستفيد من ميزات Sass، عليك استخدام ملفات تحمل الامتداد .scss أو .sass. في هذا الدليل سنعتمد صيغة SCSS لأنها أقرب إلى كتابة CSS التقليدية وأسهل على معظم المطوّرين.

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

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

بعد ذلك، أعد تسمية الملف:

/styles/Home.module.css

ليصبح:

/styles/Home.module.scss

الفرق هنا هو تغيير الامتداد فقط من .css إلى .scss. بمجرد إعادة تحميل الصفحة، سيعود التطبيق للعمل لكن هذه المرة مع دعم كامل لميزات Sass.

إذا أردت تطبيق الفكرة نفسها على الأنماط العامة، فيمكنك أيضاً إعادة تسمية ملف /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.

إنشاء ملف جزئي للخلطات

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

/styles/_mixins.scss

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

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

@import 'mixins';

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

كتابة mixin للاستجابة

أضف داخل الملف _mixins.scss الشيفرة التالية:

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

الكلمة @content تعني أن أي شيفرة تضعها داخل استدعاء هذا الـ mixin سيتم حقنها داخل قاعدة media query تلقائياً.

تطبيق mixin داخل ملف الأنماط

إذا كان لديك جزء في الملف يعتمد على استجابة الشبكة .grid، فيمكنك استبدال الكتابة التقليدية بهذا الأسلوب:

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

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

لكن يمكن تحسين البنية أكثر من خلال الاستفادة من ميزة التداخل في Sass. فبدلاً من إبقاء تعريف .grid منفصلاً داخل الاستدعاء، يمكن دمج الاستجابة داخل الصنف نفسه:

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

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

مثال إضافي على التداخل في Sass

من الاستخدامات اليومية المفيدة في Sass أنك تستطيع وضع العناصر الفرعية داخل العنصر الأب، بدلاً من كتابة المحددات بشكل منفصل.

بدلاً من هذا الأسلوب التقليدي:

.footer {
  /* Styles */
}

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

يمكنك كتابة:

.footer {
  /* Styles */

  img {
    margin-left: 0.5rem;
  }
}

سيقوم Sass أثناء التحويل بإنتاج الصيغة القياسية نفسها في CSS، لكن ملفك سيصبح أكثر ترتيباً ووضوحاً.

ماذا يمكنك أن تفعل أيضاً باستخدام Sass مع Next.js؟

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

دوال الألوان

يوفّر Sass مجموعة كبيرة من الدوال للتعامل مع الألوان. من أكثرها شيوعاً darken() وlighten()، إذ تساعدانك على إنشاء درجات متناسقة من اللون نفسه بدلاً من اختيار قيم عشوائية.

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

إلى جانب mixins، يمكنك تعريف دوال حقيقية في Sass تعيد قيماً محسوبة بناءً على مدخلات محددة. هذه الميزة مفيدة جداً عند الحاجة إلى منطق تصميم متكرر.

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

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

إدارة أفضل لملفات الأنماط

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

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

• استخدم المتغيرات للألوان والمسافات والأحجام الثابتة لتقليل التكرار.
• أنشئ ملفات جزئية مثل _variables.scss و_mixins.scss للفصل بين المسؤوليات.
• لا تُكثر من التداخل بشكل مبالغ فيه حتى لا تصبح الشيفرة صعبة التتبع.
• اجعل mixins للحالات المتكررة فعلاً، لا لكل سطر بسيط من الأنماط.
• استفد من CSS Modules في عزل الأنماط المحلية، واترك الأنماط العامة لما هو مشترك فعلاً على مستوى التطبيق.

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

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