كيفية استخدام Sass في React
Sass هو نسخة محسّنة من CSS يمكنك استخدامها في مشاريع React الآن.
Sass (أوراق الأنماط الرائعة من الناحية التركيبية) هو امتداد لـ CSS مع ميزات إضافية تجعله أكثر قوة. أفضل شيء في Sass هو توافقه مع CSS ، مما يعني أنه يمكنك استخدامه في مشاريع تطوير الويب الخاصة بك باستخدام أطر JavaScript مثل React. |
| كيفية استخدام Sass في React |
ومع ذلك ، على عكس Vanilla CSS ، فأنت بحاجة إلى القليل من الإعداد لاستخدام Sass. اكتشف كيف يعمل ذلك عن طريق إعداد مشروع React.js بسيط ودمج Sass معه.
كيفية استخدام Sass في مشروع React.js الخاص بك
مثل معالجات CSS الأخرى ، لا يتم دعم Sass أصلاً بواسطة React. لاستخدام Sass في React ، تحتاج إلى تثبيت تبعية طرف ثالث عبر مدير الحزم مثل yarn أو npm.يمكنك التحقق مما إذا كان npm أو الغزل مثبتًا على جهازك المحلي عن طريق تشغيل npm --version أو yarn --version . إذا كنت لا ترى رقم الإصدار في جهازك الطرفي ، فقم بتثبيت npm أو الغزل أولاً.
أنشئ مشروع React.js
لمتابعة هذا الدليل ، يمكنك إعداد تطبيق React.js بسيط باستخدام تطبيق create-react-app.أولاً ، استخدم سطر الأوامر للانتقال إلى المجلد الذي تريد إنشاء مشروع React فيه. ثم قم بتشغيل npx create-reaction-app <appname> . بمجرد انتهاء العملية ، أدخل دليل التطبيق باستخدام cd <appname> . أضف المحتوى التالي إلى ملف App.js الخاص بك كبداية:
.webp "كيفية استخدام Sass في React") |
| كيفية استخدام Sass في React |
بمجرد إعداد مشروع React الأساسي ، حان الوقت لدمج Sass.
قم بتثبيت Sass
يمكنك تثبيت Sass عبر npm أو الغزل. قم بتثبيته عبر الغزل عن طريق تشغيل yarn add sass أو ، إذا كنت تفضل npm ، فقم بتشغيل npm install sass . سيضيف مدير الحزم أحدث إصدار من Sass إلى قائمة التبعيات في ملف package.json الخاص بالمشروع .
إعادة تسمية ملفات .css إلى .scss أو .sass
في مجلد المشروع ، أعد تسمية App.css و index.css إلى App.scss و index.scss ، على التوالي.
بعد إعادة تسمية هذه الملفات ، تحتاج إلى تحديث عمليات الاستيراد في ملفات App.js و index.js لتتوافق مع امتدادات الملفات الجديدة على النحو التالي:
من هذه النقطة فصاعدًا ، يجب عليك استخدام الامتداد .scss لأي ملف نمط تقوم بإنشائه.
استيراد واستخدام المتغيرات والخلطات
من أهم مزايا Sass أنها تساعدك على كتابة أنماط نظيفة قابلة لإعادة الاستخدام باستخدام المتغيرات والمزج. في حين أنه قد لا يكون من الواضح كيف يمكنك فعل الشيء نفسه في React ، إلا أنه لا يختلف كثيرًا عن استخدام Sass في المشاريع المكتوبة باستخدام JavaScript و HTML.
أولاً ، قم بإنشاء مجلد Styles جديد في مجلد src الخاص بك . في مجلد الأنماط ، قم بإنشاء ملفين: _variables.scss و _mixins.scss . أضف القواعد التالية إلى _variables.scss:
وأضف ما يلي إلى _mixins.scss:
ثم قم باستيراد المتغيرات والمزج في App.scss على النحو التالي:
استخدم المتغيرات والمزج في ملف App.scss:
.webp "كيفية استخدام Sass في React") |
| كيفية استخدام Sass في React |
هذه هي الطريقة التي تستخدم بها المتغيرات والخلطات في React. إلى جانب المزيج والمتغيرات ، يمكنك أيضًا استخدام جميع الميزات الرائعة الأخرى في Sass ، مثل الوظائف. ليس هناك حدود.
استخدام Sass في React.js
يوفر Sass المزيد من الوظائف أعلى CSS ، وهو بالضبط ما ستحتاجه لكتابة كود CSS قابل لإعادة الاستخدام.
يمكنك البدء في استخدام Sass في React عن طريق تثبيت حزمة sass عبر npm أو الغزل ، وتحديث ملفات CSS إلى .scss أو .sass ، ثم تحديث الواردات لاستخدام امتداد الملف الجديد. بعد ذلك ، يمكنك البدء في كتابة SCSS في React.
