ثريد front end
المتغيرات في Css
واحده من أفضل الخواص التي يجب عليك تعلمها و إحتراف إستخدامها.
قراءة ممتعة 😇
🧵👇🏻
المتغيرات في Css
واحده من أفضل الخواص التي يجب عليك تعلمها و إحتراف إستخدامها.
قراءة ممتعة 😇
🧵👇🏻
✳ لماذ نحتاج إلى إستخدام المتغيرات؟
تخيل معي أنك تمتلك لون معين
و تستخدمه في أجزاء مختلفة من الموقع
أثناء تطوير الموقع تم طلب منك تغيير اللون
في المشاريع الصغيرة الأمر ليس بتلك الصعوبة
لكن في المشاريع الكبيرة الأمر كارثي 😅
من أجل حل هذه الإشكالية يجب إستخدام المتغيرات
👇🏻
تخيل معي أنك تمتلك لون معين
و تستخدمه في أجزاء مختلفة من الموقع
أثناء تطوير الموقع تم طلب منك تغيير اللون
في المشاريع الصغيرة الأمر ليس بتلك الصعوبة
لكن في المشاريع الكبيرة الأمر كارثي 😅
من أجل حل هذه الإشكالية يجب إستخدام المتغيرات
👇🏻
الصوره تحت تمثل عناصر html
التي سوف يتم إختبار الكود عليها
👇🏻
التي سوف يتم إختبار الكود عليها
👇🏻
✳ أنواع المتغيرات
✴ متغير عام global variables :
يمكن الوصول له من أي عنصر في الصفحه
✴ متغير خاص:
يمكن إستخدامه بداخل العنصر فقط
👇🏻
✴ متغير عام global variables :
يمكن الوصول له من أي عنصر في الصفحه
✴ متغير خاص:
يمكن إستخدامه بداخل العنصر فقط
👇🏻
✳ المتغيرات العامة Global variables
يتم تعريفها بداخل ال
:root{ }
العنصر الأب root element.
إسم المتغير يجب أن يبدأ با --
من أجل إستخدام المتغير يتم إستخدام الداله
var()
بداخل الأقواس إسم المتغير
الصوره تحت.
يمكنك تغيير إسم المتغير كما تحب 😉.
👇🏻
يتم تعريفها بداخل ال
:root{ }
العنصر الأب root element.
إسم المتغير يجب أن يبدأ با --
من أجل إستخدام المتغير يتم إستخدام الداله
var()
بداخل الأقواس إسم المتغير
الصوره تحت.
يمكنك تغيير إسم المتغير كما تحب 😉.
👇🏻
يمكن إستخدام المتغيرات مع الداله
calc()
كما نلاخظ في الصورة فوق.
يتم حساب حجم h2 بصوره ديناميكية
اذا تغير قيمه المتغير
--p-fsize
يتم تغيير حجم h2
((
اسم المتغير إختصار لأ
--primary-fontsize
))
👇🏻
calc()
كما نلاخظ في الصورة فوق.
يتم حساب حجم h2 بصوره ديناميكية
اذا تغير قيمه المتغير
--p-fsize
يتم تغيير حجم h2
((
اسم المتغير إختصار لأ
--primary-fontsize
))
👇🏻
✳ المتغيرات الخاصة.
يتم تعريفها بداخل العنصر
إذا تم تعريف متغير عام
و متغير خاص بنفس الإسم
و تم إستخدام المتغير بداخل العنصر
يتم أخذ قيمه المتغير الخاص
و لا يتم أخذ قيمه المتغير العام.
الصوره تحت
👇🏻
يتم تعريفها بداخل العنصر
إذا تم تعريف متغير عام
و متغير خاص بنفس الإسم
و تم إستخدام المتغير بداخل العنصر
يتم أخذ قيمه المتغير الخاص
و لا يتم أخذ قيمه المتغير العام.
الصوره تحت
👇🏻
✳ القيمه الاحتياطية في حاله لم يتم تعريف المتغير.
في حالة أردنا تعريف قيمه احتياطية
اذا لم يتم تعريف المتغير
color : var(--varname, red)
إسم المتغير و فاصله ثم القيمه الاحتياطية
الصوره تحت
👇🏻
في حالة أردنا تعريف قيمه احتياطية
اذا لم يتم تعريف المتغير
color : var(--varname, red)
إسم المتغير و فاصله ثم القيمه الاحتياطية
الصوره تحت
👇🏻
المتغيرات من أهم الأمور التي يتم
إستخدامها في المشاريع الكبيره.
إطار Tailwindcss
معتمد إعتماد كامل على المتغيرات.
و يتم إستخدام المتغيرات من طرف أطر مشهوره مثل bootstrap
مع المتغيرات الموجوده في css
يمكنك صنع أشياء في غاية التعقيد بطرق سهله 😉
👇🏻
إستخدامها في المشاريع الكبيره.
إطار Tailwindcss
معتمد إعتماد كامل على المتغيرات.
و يتم إستخدام المتغيرات من طرف أطر مشهوره مثل bootstrap
مع المتغيرات الموجوده في css
يمكنك صنع أشياء في غاية التعقيد بطرق سهله 😉
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
جاري تحميل الاقتراحات...