كيفية استخدام مكونات Sass و Styled في تطبيق React JS

سنقوم اليوم بتغطية بعض الطرق الشائعة لتصميم تطبيقات React JS لدينا مثل Styled Components و Sass لشرح فوائد الاثنين معا.

هناك معركة محتدمة في مجتمع التطوير عبر الإنترنت حول ما إذا كان يجب على الأشخاص استخدام CSS-in-JS أو CSS-in-Javascript أم لا. هذا المنشور لا يوافق أو لا يوافق على أيٍّ من وجهات النظر هذه ، بل يقدم مقدمة حتى تتمكن من اتخاذ القرار بنفسك.

الأدوات التي سنغطيها اليوم هي Styled Components ، وهي مكتبة CSS-in-JS تسهل تنفيذها في مشروع React js. تسمى الأداة الأخرى Sass ، التي كانت أداة شائعة على مدار السنوات القليلة الماضية في عالم جافا سكريبت.

لكل مثال ، سنقوم بإنشاء مكون بطاقة اجتماعية مع صورة واسم المستخدم والطابع الزمني وصورة المستخدم والحالة. تجدر الإشارة إلى أن هذه ليست محددة رد الفعل. يمكنك استخدام هذه في Vuejs أو Angular أو أي شيء آخر تقوم ببنائه في javascript.

لماذا يتجادل الناس حول CSS-in-JS؟

السبب الرئيسي للمناقشة يتعلق بفصل المخاوف. هل من الأفضل أن تكتب أساليبنا مباشرة داخل مكوننا؟ يجب أن نحافظ على أنماطنا منفصلة عن جافا سكريبت لدينا؟

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

CSS-في-JS

بدأ مفهوم CSS-in-JS في صنع الموجات عندما نوقش في عام 2014. ومنذ ذلك الحين ، تم إنشاء العديد من المكتبات المختلفة لمحاولة جعل هذا المفهوم حقيقة واقعة. عدد قليل من هذه المكتبات هي: مكونات نمط أو Radium أو أفروديت أو Emotion.

سأستخدم Styled Components في هذا المنشور ، على الرغم من أنني أقترح التحقق من كل منها لأن كل منها لديه بناء جملة خاص به ويعمل بشكل مختلف بعض الشيء. تعد الوثائق الخاصة بكل من هذه الأشياء جيدة جدًا لتعلم الأساسيات ومعرفة أيها أكثر راحة.

تثبيت مكونات styled

على افتراض أنه قد تم بالفعل إعداد مشروع React js ، فيمكننا إضافة مكونات Styled إلى المشروع من خلال تشغيل مكونات styled-npm install أو مكونات إضافة styled-yarn في الجهاز. سيؤدي ذلك إلى إضافة التبعيات إلى المشروع وجعلنا على استعداد لتصميم طلبنا.

إنشاء بطاقة مع مكونات نصب

ستكون الخطوة التالية هي إنشاء مكون لإظهار بطاقتنا. يمكننا استخدام الكود أدناه للقيام بذلك:

دعنا نتحدث عن الكود أعلاه. من المحتمل أن ترى بعض الأشياء التي تبدو مألوفة إذا كنت راضيًا عن CSS وسترى بعض الأشياء التي تبدو غريبة بعض الشيء. يتيح لنا Styled Components أن تكتب أنماطًا تمامًا كما نود في ملف CSS ، على الرغم من أن بعض مكتبات CSS-in-JS الأخرى تتطلب منا استخدام Camel Casing لأنه في الواقع مجرد إنشاء كائن javascript.

ما يفعله الكود أعلاه هو إنشاء متغير const يسمى Card والذي يقول أن التصميم يجب أن ينشئ div مع الخصائص التالية. يمكن القيام بذلك لأي عنصر DOM ، لذلك إذا أردت تصميم علامة h1 ، فستستخدم styled.h1.

مضيفا استفسارات وسائل الإعلام والتداخل

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

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

باستخدام جافا سكريبت في الأنماط

فائدة أخرى لاستخدام CSS-in-JS هي أنه يمكننا مزج جافا سكريبت مع الأنماط. أدرك أن هذا يبدو نوعًا من الوضوح من اسم المفهوم ، لكن ما أقصده هو أنه يمكننا استخدام المنطق لعرض الأشياء ويمكننا تمرير المتغيرات إلى أنماطنا. يمكن أن يصبح هذا أداة قوية للغاية مع مكتبة مثل React js. لن نحافظ على هذا الأسلوب لأنه بغيض إلى حد ما ، ولكن لأغراض التوضيح ، يمكننا القيام بذلك بأحرف حرفية مثل:

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

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

باستخدام موضوع عالمي

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

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

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

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

تعتبر مكونات Styled Components لطيفة للغاية لأنها تسمح لنا برمي أنماطنا في نفس الملف مثل مكوننا بدلاً من فتح عدة ملفات مختلفة للعثور على الأنماط الصحيحة. إليك ما تبدو عليه بطاقتنا الاجتماعية النهائية مع مكونات Styled Components:

باستخدام ساس في تطبيق React

تم إنشاء Sass قبل عدة سنوات وتم تنفيذه في الأصل في تطبيقات تم إنشاؤها باستخدام Ruby. في السنوات الأخيرة ، تم تكييفه للعمل مع Node.js وهو كيف سنستخدمه اليوم. قد تلاحظ أننا نقوم بإنشاء ملفات "scss" ولكننا نسميها sass. هذا لأنه تم إنشاء Sass في الأصل باستخدام بناء جملة معين يُعرف فعليًا باسم "Sass". في وقت لاحق تم إنشاء بناء جملة بديل يشبه CSS ، وهذا ما يسمى "Scss". نظرًا لأن Scss لديه نفس وظائف Sass ، فإنه لا يزال يندرج في فئة Sass.

من السهل عمومًا تشغيل Sass وتشغيله في تطبيق React js ، على الرغم من أنه يحدث فرقًا في كيفية تجميع التطبيق أو تجميعه. في الكود الخاص بهذا البرنامج التعليمي ، سأستخدم Parcel js الذي يسهل الوصول إليه وتشغيله ويتعامل مع Sass لنا. هناك مكتبات أخرى تكون ضرورية أحيانًا مثل node-sass أو gatsby-plugin-sass أو next-sass.

إعداد ملفات ساس الخاصة بنا

هناك عدة طرق مختلفة لاستخدام Sass في تطبيق React js. الأول هو إنشاء مكون في مجلد وتضمين أنماط المكون كملف .scss داخل هذا المجلد واستيرادها مباشرةً إلى المكون. لقد فعلت ذلك بهذه الطريقة ووجدت أن الأمر سهل ولكنني لم أهتم بالمؤسسة كثيرًا.

البديل هو إنشاء مجلد Sass داخل مشروعنا وهذا هو المكان الذي ستعيش فيه أنماطنا. هذه هي الطريقة التنظيمية التي سنستخدمها اليوم. ومع ذلك ، سنقوم بإنشاء مجلد في المشروع يسمى "Sass" وإضافة ملف يسمى "app.scss". على الرغم من أننا يمكن أن نضع كل أنماطنا في ملف app.scss هذا ، إلا أن ذلك سيكون فوضويًا ولن يوفر فائدة كبيرة على CSS العادي.

بدلاً من ذلك ، سننشئ ملفات منفصلة ونستوردها فقط إلى ملف app.scss. يمكننا بعد ذلك استيراد ملف app.scss إلى ملف app.js الخاص بنا وسوف تقوم شركة Parcel بالباقي.

هيكل ساس المجلد

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

  • / ساس
  • / Sass / Components - دليل يحتوي على ملف .scss لكل مكون React
  • / Sass / Pages - دليل يحتوي على ملف .scss لكل صفحة تتطلب أنماطًا مخصصة
  • / Sass / Templates (اختياري) - دليل للقوالب في حالة استخدامها (لأدوات مثل gatsby)
  • /Sass/_elements.scss - أي أنماط عامة للموقع. لا ينبغي أن يكون لها أي فئات أو معرفات للاختيار.
  • /Sass/_keyframes.scss (اختياري) - أي إطارات مفتاحية أو رسوم متحركة سأستخدمها للموقع.
  • /Sass/_mixins.scss - أي mixins (قصاصات نمط) التي سيتم استخدامها مرارا وتكرارا
  • /Sass/_variables.scss - أي متغيرات سيتم استخدامها خلال الأنماط
  • /Sass/app.scss - الملف الذي يستورد جميع ملفات scss الأخرى

أول ما تلاحظه حول أسماء الملفات هو أن العديد منها يبدأ بتسطير أسفل السطر. هذا لأنه خارج العقدة ، يتم تجميع Sass بالفعل إلى ملف CSS. يتم تصنيف أي ملف SCSS بدون تسطير أسفل السطر في البداية على هيئة ورقة أنماط مختلفة. نظرًا لأننا نسحب كل أوراق الأنماط الخاصة بنا إلى ملف app.scss بدلاً من فصلها ، فيجب أن تبدأ جميعها بتسطير أسفل السطر.

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

ومع ذلك ، لنبدأ!

إعداد المتغيرات في ساس

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

بمجرد إضافة بعض المتغيرات ، يجب علينا استيرادها إلى ملف app.scss. نظرًا لأننا نريد استخدام هذه المتغيرات في أي مكان في أنماطنا ، فيجب أن يكون هذا الاستيراد في اتجاه أعلى قائمة الاستيراد. سيضيف سطر التعليمات البرمجية التالي المتغيرات إلى أنماطنا. يمكننا أيضًا أن نرى أنه لا يتعين علينا تضمين ملحق الشرطة السفلية أو ملف في بيان الاستيراد لأن Sass ذكي بما يكفي لنعرف أن هذا ما نعنيه.

إنشاء أنماط عالمية للعناصر

لقد أنشأنا بعض الأنماط العالمية لتطبيق المكونات المصممة لدينا والذي قام بتعيين الخط على خط sans-serif وتعيين لون نصنا إلى # 333. دعنا نمضي قدمًا وننشئ تلك الأنماط في Sass أيضًا. للبدء ، سننشئ ملف _elements.scss في مجلد Sass الخاص بنا. فيما يلي الأنماط التي أستخدمها لهذا الملف وستلاحظ أنني أستخدم المتغيرات التي أنشأناها تمامًا كما فعلنا مع المكونات المصممة.

الآن يمكننا استيراد ملف _elements.scss إلى ملف app.scss لدينا. معرفة ما إذا كان يمكنك القيام بذلك دون النظر. يجب أن يبدو ملف app.scss الخاص بنا الآن كما يلي:

إضافة فئات إلى عناصر في المكون

حتى نتمكن من استهداف العناصر في مكون React js الخاص بنا ، يجب أن نضيف بعض الفئات و / أو المعرفات. تتطلب أطر CSS مثل Boostrap و Foundation الكثير من الفصول التي يمكن أن تتعرض للفوضى. الكود المفضل لدي هو الكود الذي لا يحتوي على أكثر من 30 فئة في عنصر للأنماط ، لذلك مع الأخذ في الاعتبار دعنا نمضي قدمًا ونضيف بعض الفئات إلى المكون الخاص بنا مع الكود أدناه:

ممتاز! لنبدأ في تصميم مكوننا! داخل مجلد Sass ، قم بإنشاء مجلد جديد يسمى "المكونات". سيحتوي هذا المجلد على الأنماط لجميع مكونات React js. عادةً ما أضع كل مكون في ملفه الخاص ، هذا تطبيق بسيط جدًا لذلك سنحتفظ به في ملف app.js.

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

الكود الموجود أدناه سيصمم البطاقة الاجتماعية ليظهر بنفس شكل بطاقة التواصل الاجتماعي الخاصة بنا:

الآن يمكننا المضي قدمًا وكتابة عبارة الاستيراد في ملف app.scss حتى نتمكن من سحب أنماط البطاقة.

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

الأفكار النهائية على مكونات Sass vs Styled Components

كما ترون ، كلا Sass و Styled Components هما طريقتان قيمتان لشحن الأنماط في تطبيقات React js. في النهاية ، أعتقد أنه يجب عليك استخدام الشيء الذي تستمتع به أكثر من غيره. أجد نفسي أواصل الوصول إلى Sass أكثر من مرة ، ولكني أستمتع أيضًا باستخدام CSS-in-JS في بعض مشاريعي الشخصية. إذا كنت ترغب في الاطلاع على الكود المشار إليه في هذا المنشور أو اللعب معه ، فيمكنك العثور عليه هنا.

نشرت أصلا في www.iamtimsmith.com.