• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

[ حصريا ] طريقة استخدام متغيرات اعدادات اﻻستايل في قوالب css

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,072
113
K.S.A
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة وأتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،


اقدم لكم اليوم اخوتي اﻻعزاء طريقة استخدام متغيرات اعداد اﻻستايل داخل قوالب CSS والتي للاسف ارى ان الكثير يغفل عنها وﻻ اعلم هل هو بقصد ام من دون قصد لذا احببت ان اشارككم هذه الطريقة لمن اراد ان يستخدمها في المستقبل عند تصميم اي استايل او حتى عند التعديل على اﻻستايلات

بداية ما اقصده بمتغيرات اعداد اﻻستايل هي اسامي الحقول البرمجية التي تظهر دائما ً تحت اسماء الحقول مثل ماهو محدد باللون اﻻحمر في الصورة التالية:


1.jpg


ملاحظة: لتستطيع مشاهدة اسامي الحقول البرمجية تحتاج الى تفعيل الوضع البرمجي.


اﻻن لنأخذ مثال:

دعونا نفترض اننا نريد استخدام خيار اللون 1 في احد قوالبنا ولنفرض ايضا اننا تريد ان يكون هذا اللون هو خلفية ﻻي منطقة من مناطق اﻻستايل

فكل ما علينا هو نسخ اسم الحقل البرمجي وفي مثالنا هذا هو paletteColor1 ووضعه بعد متغير الزين فورو الخاص باﻻستايلات وهو @xf متبوعا ً بعلامة الشرطة - بالطريقة التالية في احد خيارات css:


CSS:
.somediv{
    background: @xf-paletteColor1;
}

اﻻن لو ذهبنا الى المنطقة المراد تعديلها عليها سوف نجد ان خلفية هذه المنطقة تم تغييرها الى نفس الون 1 الذي قمنا بوضع قيمته كخلفية لهذه المنطقة وقس على ذلك باقي اعدادات اﻻستايل

طبعاً متأكد انه قد يتبادر في ذهن البعض انه ما الحاجه ﻻستخدام الحقول البرمجية ما دام باستطاعتي استخدام اكواد اﻻلوان بشكل مباشر سواء hex او rgb ... الخ

واﻻجابة لدي هي لعدة اسباب منها :

اﻻول انه عند استخدام الحقول البرمجية فانه باستطاعتك اﻻستفادة من عجلة اﻻلوان واختيار اللون حسب حاجتك واقصد بعجلة اﻻلوان كما بالصورة التالية:


2.jpg

والسبب الثاني: هو انه من السهل التعديل على اللون من خلال اعدادات اﻻستايل بدلاً من البحث عن اللون المراد تغييره داخل الكثير من اﻻسطر خصوصاً لو كان قالب extra.less غاص بالكثير من الاكواد او لو كان الشخص الذي يتعامل مع الموقع ليس لديه الخبرة الكافية في لغة css والتي قد ينجم عن نسيان جزء من الكود في القوالب الى ظهور اخطاء في اﻻستايل

اضافة الى ذلك فبإمكانك انشاء خيارات جديدة حسب حاجتك او لو كان اﻻستايل له خيارات خاصة تظهر في اﻻستايل وتريد ان يكون للمستخدم الحرية في اختيار الالوان فبهذا لن تلزم المستخدم على اللون الذي تم تحديده في قالب extra.less بل سوف تترك له الحرية ﻻختيار اللون الذي يريد حسب ذوقه

وسوف افرد درس منفرد بخصوص هذا الموضوع في اﻻيام المقبلة ان شاء الله ان امد الله لنا ولكم بالعمر والصحة


في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ

وتقبلوا احترامي وتقديري
اخوكم
شقاوي
 
ما شاء الله عليك أخي تركي درس جميل و مفيد لمصممي الستايلات و بالفعل الطريقة جميلة خصوصا عندما يكون للستايل المصمم خيارات مما يسهل على المستخدم تغير الالوان بحرية تامة ودون اللخبطة في أكواد الالوان.
تسلم و احلى تقييم🥳
 
درس رائع جدا
بارك الله فيك أخي شقاوي
تحياتي لك يا غالي

الله يبارك بعمرك اخوي احمد

ما شاء الله عليك أخي تركي درس جميل و مفيد لمصممي الستايلات و بالفعل الطريقة جميلة خصوصا عندما يكون للستايل المصمم خيارات مما يسهل على المستخدم تغير الالوان بحرية تامة ودون اللخبطة في أكواد الالوان.
تسلم و احلى تقييم🥳

تسلم اخوي أبو غيث وفعلا الطريقة هذي مرتبة وسهلة خصوصا ً لمن ليس لديه خبرة في css
 

المواضيع المُشابهة

إحصائيات المنتدى

المواضيع
1,446
المشاركات
16,603
الأعضاء
1,022
آخر عضو مسجل
naseh
أعلى