Sass (أوراق الأنماط الرائعة من الناحية التركيبية) هو امتداد لـ CSS مع ميزات إضافية تجعله أكثر قوة. أفضل شيء في Sass هو توافقه مع CSS ، مما يعني أنه يمكنك استخدامه في مشاريع تطوير الويب الخاصة بك باستخدام أطر JavaScript مثل React.
ومع ذلك ، على عكس Vanilla CSS ، فأنت بحاجة إلى القليل من الإعداد لاستخدام Sass. اكتشف كيف يعمل ذلك عن طريق إعداد مشروع React.js بسيط ودمج Sass معه.
كيفية استخدام Sass في مشروع React.js الخاص بك
مثل معالجات CSS الأخرى ، لا يتم دعم Sass أصلاً بواسطة React. لاستخدام Sass في React ، تحتاج إلى تثبيت تبعية طرف ثالث عبر مدير الحزم مثل yarn أو npm.
يمكنك التحقق مما إذا كان npm أو الغزل مثبتًا على جهازك المحلي عن طريق التشغيل npm - الإصدار أو غزل - نسخة. إذا كنت لا ترى رقم الإصدار في جهازك الطرفي ، تثبيت npm أو الغزل أولا.
أنشئ مشروع React.js
لمتابعة هذا الدليل ، يمكنك إعداد تطبيق React.js بسيط باستخدام تطبيق create-react-app.
أولاً ، استخدم سطر أوامر للانتقال إلى المجلد الذي تريد إنشاء مشروع React فيه. ثم اركض
npx إنشاء-رد فعل-التطبيق . بمجرد انتهاء العملية ، أدخل دليل التطبيق باستخدام قرص مضغوط . أضف المحتوى التالي إلى ملف App.js ملف كمبتدئ:يستورد تتفاعل من "تتفاعل"؛
يستورد "./App.scss";
وظيفةبرنامج() {
يعود (
<div className ="غلاف">
<h1>استخدام Sass في React</h1>
<header className ="المجمع__btns">
<زر>الزر الأزرق</button>
<زر>الزر الأحمر</button>
<زر>الزر</button>
</header>
</div> );
}
يصدّرتقصير برنامج؛بمجرد إعداد مشروع React الأساسي ، حان الوقت لدمج Sass.
قم بتثبيت Sass
يمكنك تثبيت Sass عبر npm أو الغزل. قم بتثبيته عبر الغزل عن طريق التشغيل إضافة غزل ساس أو ، إذا كنت تفضل npm ، فقم بتشغيل npm تثبيت sass. سيضيف مدير الحزم الخاص بك أحدث إصدار من Sass إلى قائمة التبعيات في المشروع package.json ملف.
إعادة تسمية ملفات .css إلى .scss أو .sass
في مجلد المشروع ، أعد تسمية App.css و index.css إلى App.scss و index.scss ، على التوالي.
بعد إعادة تسمية هذه الملفات ، تحتاج إلى تحديث عمليات الاستيراد في ملفات App.js و index.js لتتوافق مع امتدادات الملفات الجديدة على النحو التالي:
يستورد "./index.scss";
يستورد "./App.scss";من هذه النقطة فصاعدًا ، يجب عليك استخدام الامتداد .scss لأي ملف نمط تقوم بإنشائه.
استيراد واستخدام المتغيرات والخلطات
واحدة من أهمها مزايا ساس هو أنه يساعدك على كتابة أنماط نظيفة وقابلة لإعادة الاستخدام باستخدام المتغيرات والمزج. على الرغم من أنه قد لا يكون من الواضح كيف يمكنك فعل الشيء نفسه في React ، إلا أنه لا يختلف كثيرًا عن استخدام Sass في المشاريع المكتوبة باستخدام JavaScript و HTML.
أولاً ، قم بإنشاء ملف الأنماط مجلد في الخاص بك src مجلد. في مجلد Styles ، أنشئ ملفين: _variables.scss و _mixins.scss. أضف القواعد التالية إلى _variables.scss:
لون الخلفية $: # f06292 ؛
لون النص $: # f1d3b3 ؛
عرض مليار دولار: 120مقصف ؛
ارتفاع مليار دولار: 40مقصف ؛
المساحة المتروكة: 60مقصف ؛وأضف ما يلي إلى _mixins.scss:
تضمين التغريدة قائمة عمودية {
العرض: فليكس ؛
محاذاة العناصر: مركز ؛
الاتجاه المرن: العمود.
}ثم قم باستيراد المتغيرات والمزج في App.scss على النحو التالي:
@يستورد "./Styles/variables";
@يستورد "./Styles/mixins";استخدم المتغيرات والمزج في ملف App.scss:
@يستورد "./Styles/variables.scss";
@يستورد "./Styles/mixins";
.غلاف {
لون الخلفية: $ background-color؛
اللون: لون النص $؛
المساحة المتروكة: $ block-padding؛&__btns {
@يشمل رَأسِيّ-قائمة;
زر {
العرض: $ btn-width ؛
الارتفاع: ارتفاع مليار دولار ؛
}
}
}
هذه هي الطريقة التي تستخدم بها المتغيرات والخلطات في React. إلى جانب المزيج والمتغيرات ، يمكنك أيضًا استخدام جميع الميزات الرائعة الأخرى في Sass ، مثل الوظائف. ليس هناك حدود.
استخدام Sass في React.js
يوفر Sass المزيد من الوظائف أعلى CSS ، وهو بالضبط ما ستحتاجه لكتابة كود CSS قابل لإعادة الاستخدام.
يمكنك البدء في استخدام Sass في React عن طريق تثبيت حزمة sass عبر npm أو الغزل ، وتحديث ملفات CSS إلى .scss أو .sass ، ثم تحديث الواردات لاستخدام امتداد الملف الجديد. بعد ذلك ، يمكنك البدء في كتابة SCSS في React.
