حاب تعرف:
ايش هي SASS ؟
ليش لازم تتعلمها؟
كيف ممكن تحملها وتبدأ تستخدمها؟
هذا الثريد لك ✨
ايش هي SASS ؟
ليش لازم تتعلمها؟
كيف ممكن تحملها وتبدأ تستخدمها؟
هذا الثريد لك ✨
1⃣ - إيش هي SASS ؟
لو دورت عن SASS بأي موقع راح تلقى كلام كثير مثل إنها عبارة عن CSS Preprocessor .. الخ وهالكلام طبعا صح ولا عليه خلاف .. لكن الي يهمني بهذا الثريد هو الناحية التطبيقية والعملية .. لذلك راح أقولك إيش هي SASS بالطريقة التالية:
لو دورت عن SASS بأي موقع راح تلقى كلام كثير مثل إنها عبارة عن CSS Preprocessor .. الخ وهالكلام طبعا صح ولا عليه خلاف .. لكن الي يهمني بهذا الثريد هو الناحية التطبيقية والعملية .. لذلك راح أقولك إيش هي SASS بالطريقة التالية:
يمديك تفكر بـ SASS كنسخة محسنة ومطورة من الـ CSS , نسخة تسمح لك تبرمج بالـ CSS كأنها لغة برمجة ( يمديك تستخدم أشياء مثل الـ loops والـ if والـ functions وغيرها )
كنتيجة لكذا راح تحس إن الكود مرتب ومنطقي أكثر
كنتيجة لكذا راح تحس إن الكود مرتب ومنطقي أكثر
2⃣ - ليش لازم تتعلمها؟ ايش راح تستفيد؟
أولا: راح تسمح لك تكتب الـ CSS بطريقة منطقية ومرتبة و reusable أكثر بكثير من أي شيء ممكن تحلم فيه باستخدام الـ CSS فقط.
ثانيا: راح يمديك تسوي عملية الـ customization لمكتبات مشهورة زي Bootstrap وتخليها تناسب احتياجاتك أكثر وأكثر.
أولا: راح تسمح لك تكتب الـ CSS بطريقة منطقية ومرتبة و reusable أكثر بكثير من أي شيء ممكن تحلم فيه باستخدام الـ CSS فقط.
ثانيا: راح يمديك تسوي عملية الـ customization لمكتبات مشهورة زي Bootstrap وتخليها تناسب احتياجاتك أكثر وأكثر.
3⃣ - كيف ممكن تحملها وتبدأ تستخدمها؟
كثير من الكورسات باليوتيوب تستخدم extension في VScode , وطبعا هالشيء خطأ حاليا .. لأن هذي الـ extension مبنية على Ruby SASS والي صارت deprecated.
النسخة الجديدة من SASS مكتوبة باستخدام Dart
وراح نستخدم npm عشان نحملها ونستخدمها
كثير من الكورسات باليوتيوب تستخدم extension في VScode , وطبعا هالشيء خطأ حاليا .. لأن هذي الـ extension مبنية على Ruby SASS والي صارت deprecated.
النسخة الجديدة من SASS مكتوبة باستخدام Dart
وراح نستخدم npm عشان نحملها ونستخدمها
عشان أكون دقيق أكثر, احنا نحتاج نحمل الـ compiler الي راح يحول SASS للـ CSS , لأن المتصفح مايقدر يفهم SASS
الخطوات بسيطة جدا.. أول شيء نحتاج نسويه هو اننا نسوي initiate للبروجكت وبعدها نحمل SASS زي ماهو موضح بالصور:
الخطوات بسيطة جدا.. أول شيء نحتاج نسويه هو اننا نسوي initiate للبروجكت وبعدها نحمل SASS زي ماهو موضح بالصور:
بعدها نقدر نروح لملف الـ package.json , ونحط script عشان يشوف ملف الـ SASS كل مانسوي تغيير معين ويسوي عملية الـ compilation للـ CSS ( عشان كذا استخدمنا الـ watch flag )
الآن كل الي علينا هو إننا نكتب الأمر في الـ terminal , وراح نلقي المجلد الي حددناه كـ output موجود وداخله ملف الـ CSS
الآن نقدر نكتب أي SASS code , وراح نلاحظ فورا التعديل بملف الـ CSS
ملاحظات:
1- المفروض ماتعدل على ملف الـ CSS نهائيا, فقط ملف الـ SASS
2- في ملف الـ index.html حط link لملف الـ CSS ( لأنه مثل ماذكرنا من قبل .. المتصفح مايقدر يقرأ SASS
مثلا:
ملاحظات:
1- المفروض ماتعدل على ملف الـ CSS نهائيا, فقط ملف الـ SASS
2- في ملف الـ index.html حط link لملف الـ CSS ( لأنه مثل ماذكرنا من قبل .. المتصفح مايقدر يقرأ SASS
مثلا:
* النهاية *
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
جاري تحميل الاقتراحات...