shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة وأتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم اخوتي اﻻعزاء طريقة استخدام متغيرات اعداد اﻻستايل داخل قوالب CSS والتي للاسف ارى ان الكثير يغفل عنها وﻻ اعلم هل هو بقصد ام من دون قصد لذا احببت ان اشارككم هذه الطريقة لمن اراد ان يستخدمها في المستقبل عند تصميم اي استايل او حتى عند التعديل على اﻻستايلات
بداية ما اقصده بمتغيرات اعداد اﻻستايل هي اسامي الحقول البرمجية التي تظهر دائما ً تحت اسماء الحقول مثل ماهو محدد باللون اﻻحمر في الصورة التالية:
ملاحظة: لتستطيع مشاهدة اسامي الحقول البرمجية تحتاج الى تفعيل الوضع البرمجي.
اﻻن لنأخذ مثال:
دعونا نفترض اننا نريد استخدام خيار
فكل ما علينا هو نسخ اسم الحقل البرمجي وفي مثالنا هذا هو
اﻻن لو ذهبنا الى المنطقة المراد تعديلها عليها سوف نجد ان خلفية هذه المنطقة تم تغييرها الى نفس
طبعاً متأكد انه قد يتبادر في ذهن البعض انه ما الحاجه ﻻستخدام الحقول البرمجية ما دام باستطاعتي استخدام اكواد اﻻلوان بشكل مباشر سواء hex او rgb ... الخ
واﻻجابة لدي هي لعدة اسباب منها :
اﻻول انه عند استخدام الحقول البرمجية فانه باستطاعتك اﻻستفادة من عجلة اﻻلوان واختيار اللون حسب حاجتك واقصد بعجلة اﻻلوان كما بالصورة التالية:
والسبب الثاني: هو انه من السهل التعديل على اللون من خلال اعدادات اﻻستايل بدلاً من البحث عن اللون المراد تغييره داخل الكثير من اﻻسطر خصوصاً لو كان قالب extra.less غاص بالكثير من الاكواد او لو كان الشخص الذي يتعامل مع الموقع ليس لديه الخبرة الكافية في لغة css والتي قد ينجم عن نسيان جزء من الكود في القوالب الى ظهور اخطاء في اﻻستايل
اضافة الى ذلك فبإمكانك انشاء خيارات جديدة حسب حاجتك او لو كان اﻻستايل له خيارات خاصة تظهر في اﻻستايل وتريد ان يكون للمستخدم الحرية في اختيار الالوان فبهذا لن تلزم المستخدم على اللون الذي تم تحديده في قالب extra.less بل سوف تترك له الحرية ﻻختيار اللون الذي يريد حسب ذوقه
وسوف افرد درس منفرد بخصوص هذا الموضوع في اﻻيام المقبلة ان شاء الله ان امد الله لنا ولكم بالعمر والصحة
في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة وأتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم اخوتي اﻻعزاء طريقة استخدام متغيرات اعداد اﻻستايل داخل قوالب CSS والتي للاسف ارى ان الكثير يغفل عنها وﻻ اعلم هل هو بقصد ام من دون قصد لذا احببت ان اشارككم هذه الطريقة لمن اراد ان يستخدمها في المستقبل عند تصميم اي استايل او حتى عند التعديل على اﻻستايلات
بداية ما اقصده بمتغيرات اعداد اﻻستايل هي اسامي الحقول البرمجية التي تظهر دائما ً تحت اسماء الحقول مثل ماهو محدد باللون اﻻحمر في الصورة التالية:
ملاحظة: لتستطيع مشاهدة اسامي الحقول البرمجية تحتاج الى تفعيل الوضع البرمجي.
اﻻن لنأخذ مثال:
دعونا نفترض اننا نريد استخدام خيار
اللون 1 في احد قوالبنا ولنفرض ايضا اننا تريد ان يكون هذا اللون هو خلفية ﻻي منطقة من مناطق اﻻستايل فكل ما علينا هو نسخ اسم الحقل البرمجي وفي مثالنا هذا هو
paletteColor1 ووضعه بعد متغير الزين فورو الخاص باﻻستايلات وهو @xf متبوعا ً بعلامة الشرطة - بالطريقة التالية في احد خيارات css:
CSS:
.somediv{
background: @xf-paletteColor1;
}اﻻن لو ذهبنا الى المنطقة المراد تعديلها عليها سوف نجد ان خلفية هذه المنطقة تم تغييرها الى نفس
الون 1 الذي قمنا بوضع قيمته كخلفية لهذه المنطقة وقس على ذلك باقي اعدادات اﻻستايلطبعاً متأكد انه قد يتبادر في ذهن البعض انه ما الحاجه ﻻستخدام الحقول البرمجية ما دام باستطاعتي استخدام اكواد اﻻلوان بشكل مباشر سواء hex او rgb ... الخ
واﻻجابة لدي هي لعدة اسباب منها :
اﻻول انه عند استخدام الحقول البرمجية فانه باستطاعتك اﻻستفادة من عجلة اﻻلوان واختيار اللون حسب حاجتك واقصد بعجلة اﻻلوان كما بالصورة التالية:
والسبب الثاني: هو انه من السهل التعديل على اللون من خلال اعدادات اﻻستايل بدلاً من البحث عن اللون المراد تغييره داخل الكثير من اﻻسطر خصوصاً لو كان قالب extra.less غاص بالكثير من الاكواد او لو كان الشخص الذي يتعامل مع الموقع ليس لديه الخبرة الكافية في لغة css والتي قد ينجم عن نسيان جزء من الكود في القوالب الى ظهور اخطاء في اﻻستايل
اضافة الى ذلك فبإمكانك انشاء خيارات جديدة حسب حاجتك او لو كان اﻻستايل له خيارات خاصة تظهر في اﻻستايل وتريد ان يكون للمستخدم الحرية في اختيار الالوان فبهذا لن تلزم المستخدم على اللون الذي تم تحديده في قالب extra.less بل سوف تترك له الحرية ﻻختيار اللون الذي يريد حسب ذوقه
وسوف افرد درس منفرد بخصوص هذا الموضوع في اﻻيام المقبلة ان شاء الله ان امد الله لنا ولكم بالعمر والصحة
في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي
