فهم متغيرات CSS (وكيفية استخدامها)
نشرت: 2025-07-13متغيرات CSS تشبه مكونات التصميم القابلة لإعادة الاستخدام. يمكنك تحديدها مرة واحدة ، كألوان علامتك التجارية ، أو أحجام الخطوط ، أو التباعد ، ثم استخدامها أينما كان ذلك. يوفرونك من كتابة نفس رموز السداسي وقيم البكسل عبر أقسام مختلفة.
أكبر مصلحة لها هي مدى سهولة التحديث. إذا قمت بتحديث متغير مرة واحدة ، فإن كل مكان يستخدمه سيعكس التغييرات أيضًا. لذلك ، لا تتجنب فقط تكرار القيم نفسها يدويًا عبر أقسام متعددة ، ولكن يمكنك أيضًا تعديل مظهر موقع الويب بأكمله من خلال تغيير قيمة واحدة فقط.
إليك المكان الذي يتحسن فيه: مع Divi 5 ، لا تحتاج إلى كتابة أي رمز لاستخدام متغيرات CSS. تتيح لك متغيرات تصميم Divi استخدامها في سير عمل مرئي بدون رمز. فضولي كيف يعمل؟ استمر في القراءة.
- 1 ما هي متغيرات CSS؟
- 1.1 كيف تعمل متغيرات CSS
- 1.2 فهم متغيرات CSS
- 1.3 إضافة قيمة احتياطية
- 2 طريقة بدون رمز لاستخدام متغيرات CSS في Divi 5
- 2.1 تحديد متغيرات CSS في Divi 5
- 3 كيف يجعل Divi 5 سير عمل متغير CSS بدون مجهود
- 3.1 1. إنشاء إطار التصميم الخاص بك
- 3.2 2. استخدم مجموعة خيارات الإعدادات المسبقة للتصميم المرن
- 3.3 3. إعلان متغيرات CSS المخصصة لمزيد من التحكم
- 4 Divi يقدم نهجًا مدمجًا لمتغيرات CSS
ما هي متغيرات CSS؟
فكر في متغيرات CSS كعلامات مخصصة تقوم بإنشائها لعادات التصميم الخاصة بك. ما هو دائرة نصف قطر الحدود الخاصة بك في الصورة؟ ما مقدار التباعد الذي تتركه عادة بين الأقسام؟ هل لديك لون زر توقيع تستخدمه في كل مكان؟ يمكنك تحويل كل هذه الأنماط الفريدة إلى متغيرات CSS.
هذه ليست قيمًا يعرف المستعرض افتراضيًا. كل شيء مخصص. يمكنك تحديد الاسم ، وتعيين القيمة المفضلة لديك ، واستخدمها أينما تريد. إنه مثل إنشاء اختصار خاص بك يجعل التصميم أسرع ونظافة وأسهل في وقت لاحق.
لنأخذ مثالاً. لنفترض أنك تريد أن يكون لون موقعك الأساسي #007BFF. كنت تعلن ذلك مثل هذا:
:root {
--primary-color: #007bff;
}
هنا ، "-promary-color" هو اسمك المتغير ، و "#007BFF" هو قيمته. لقد قمت للتو بتخزين لون داخل علامة مخصصة يمكن للمتصفح التعرف عليها الآن.
لاستخدامه ، لا تقوم بإعادة كتابة رمز السداسي. يمكنك استدعاء المتغير داخل دالة var () مثل هذا:
button {
background-color: var(--primary-color);
}يضمن هذا السطر من الكود أن يسحب الزر الخاص بك دائمًا القيمة من-اللون الأساسي.
الآن ، يمكنك استخدامه حيثما كان الحاجة ، وعندما يحين الوقت لتحديث لون علامتك التجارية ، ليست هناك حاجة إلى البحث عن عشرات الملفات. ما عليك سوى تغيير المتغير مرة واحدة ، ويتم تحديث كل عنصر يستخدم فيه تلقائيًا. على سبيل المثال ، تستخدم الأزرار والعناوين والحدود الخاصة بك. تحرير واحد يقوم بتحديثهم جميعًا.
هكذا تبسط متغيرات CSS التحديثات على مستوى الموقع.
كيف تعمل متغيرات CSS
لإعلان متغير CSS ، يبدو أن بناء الجملة الأساسي مثل هذا:
.root {
--name: value;
} بعض الأشياء التي يجب ملاحظتها. أولاً ، يبدأ متغير CSS دائمًا بشرطين ( -). هكذا يعرف المستعرض أنه مخصص ، وهو شيء حددته لنظام التصميم الخاص بك.
خصائص CSS المدمجة مثل حجم الخط أو اللون أو الحشو لها معنى بالفعل. المتصفح يعرف بالضبط ما يجب فعله معهم. لكن الخصائص المخصصة هي علامات فارغة حتى تقوم بتعيين قيمة لها. أنت تقوم بإنشاء قواعد التصميم الخاصة بك في مشروع موقع ويب ، مثل-اللون الأساسي ، وإخبار المتصفح بما يمثله.
حيث تحدد متغيرات CSS الخاصة بك أيضًا تحدث فرقًا كبيرًا.
عندما تضعه داخل: محدد الجذر (كما فعلنا أعلاه) ، يصبح عالميًا. هذا يعني أنه يمكنك استخدام المتغير في أي صفحة وعنصر. ذلك لأن: الجذر يستهدف العنصر الأعلى من HTML الخاص بك ، وعادة ما تكون علامة <html>.
ولكن إذا حددت نفس المتغير داخل فئة أو محدد معين ، فهو يعمل فقط في تلك البقعة. مثله:
.card {
--bg-color: #f4f4f4;
} هنا ،--bg-color تنطبق فقط داخل. كارد المحدد. حاول استخدامه في مكان آخر ، ولن يظهر. على سبيل المثال ، سترى أدناه بطاقتين.
تستخدم البطاقة 1 متغيرًا محددًا محليًا-Card-BG معلنًا داخل حاوية Card. هذا المتغير يعمل فقط داخل تلك الحاوية. لا ينطبق في البطاقة 3.
البطاقة 2 ، من ناحية أخرى ، تسحب خلفيتها من -lglobal-color ، والتي يتم تعريفها في: الجذر. لهذا السبب تلتقط البطاقة 4 نفس اللون أيضًا. لديها إمكانية الوصول إلى المتغير العالمي.
كأفضل الممارسات ، إذا كنت تريد الاتساق عبر موقعك بأكمله ، فقم دائمًا بتحديد قيم CSS في: الجذر. ماذا لو قمت بتعريف متغير محليًا ونسيته ، لكنه الآن لا يعمل كما هو متوقع؟ ستقوم بإصلاحها من خلال تحديد قيمة احتياطي. سنتحدث عن هذا منذ فترة.
فهم متغيرات CSS تتالي
قد تكون على دراية بمصطلح "Cascade". حسنًا ، تتابع متغيرات CSS أيضًا ، لكن ماذا يعني هذا؟
إذا تم تعريف متغير على حد سواء على مستوى عالمي (في: الجذر) والمحلي (داخل فئة أو حاوية) ، سيستخدم المتصفح دائمًا المقرب من العنصر. هذه هي الطريقة التي يعمل بها المتتالية في CSS. قواعد أقرب تأخذ الأولوية.
وهذا بالضبط كيف يعمل وضع الظلام.
على سبيل المثال ، قد تحدد-text-text-color: Black in: Root. ولكن داخل حاوية وضعية وضعية ، يمكنك إعادة تعريفها بالأبيض. لذلك عندما يتبديل المستخدم على خيار الوضع المظلم ، سيستخدم المستعرض الإصدار المحلي داخل وضع .Dark ، على الرغم من أن الاسم المتغير يبقى كما هو.
يتيح لك ذلك الحفاظ على تسمية الخاص بك ثابتًا أثناء ضبط الأنماط على أساس السياق. إنها طريقة واحدة من متغيرات CSS تتجاوز قابلية إعادة الاستخدام البسيطة. أنها تتكيف بناء على مكان وكيف تستخدم.
إضافة قيمة احتياطية
في بعض الأحيان ، قد تشير إلى متغير CSS غير متوفر. ربما تم تعريفه فقط داخل قسم معين ، أو تم إزالته عن طريق الخطأ. عندما يحدث ذلك ، لا يعرف المتصفح ماذا يفعل. لن يتم تطبيق الأنماط التي تعتمد على هذا المتغير ببساطة.
يمكنك إضافة قيمة احتياطي مباشرة داخل وظيفة VAR () لمنع ذلك. إنه بمثابة نسخة احتياطية في حالة فقد المتغير الأصلي. إليك كيف تعمل:
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} هذا يخبر المتصفح لاستخدام-كولورن إذا كان موجودًا. إذا لم يكن كذلك ، استخدم الأسود (#000) بدلاً من ذلك.
تعتبر الاحتياطات مفيدة بشكل خاص عند بناء مكونات قابلة لإعادة الاستخدام أو العمل عبر أقسام متعددة حيث قد لا تكون المتغيرات متاحة دائمًا. أنها تبقي التصميم الخاص بك مستقرة ومتسقة.
يمكنك حتى التراجع عن السلسلة مثل اللون: var (–accent-color ، var (-promary-color ، #333)) ؛
هنا ، يتحقق المتصفح لـ -Accent-Color أولاً. إذا كان مفقودًا ، فإنه يحاول-اللون الأساسي. إذا كان هذا مفقودًا أيضًا ، فإنه يتخلف عن #333. هذا يعطي أنماطك شبكة أمان حتى تستمر في تقديمها بشكل صحيح حتى لو كانت بعض القيم مفقودة.
طريقة عدم الرمز لاستخدام متغيرات CSS في Divi 5
كل ما رأيته حول متغيرات CSS (التحكم العالمي ، والقيم القابلة لإعادة الاستخدام ، والمنطق المتتالي) يبدو رائعًا ، ولكنه يأتي أيضًا مع صيد: تحتاج إلى كتابة وإدارة التعليمات البرمجية. بالنسبة للعديد من المصممين ، هذا ليس مثاليًا. ماذا لو كنت تفضل التصميم المرئي؟ هذا يعني أنه لا يمكنك استخدام متغيرات CSS ، أليس كذلك؟ خطأ.
يمنحك Divi 5 طريقة أسرع وأكثر بصرية للعمل مع نفس منطق متغيرات CSS. يقدم متغيرات التصميم ، وهو بديل بدون رمز لمتغيرات CSS مدمجة مباشرة في منشئ Divi.
اشترك في قناتنا على YouTube
متغيرات التصميم ( مثل متغيرات CSS) هي قيم قابلة لإعادة الاستخدام التي تحددها مرة واحدة وتستخدمها عبر موقعك . ما يختلف هو كيف تفعل ذلك. لا تحددها في ورقة الأنماط الخاصة بموقع الويب الخاص بك ولكن في مدير متغير داخل Divi Builder ، بصريًا.
مثل متغيرات CSS ، يمكنك إعطاء متغير تصميم وتعيين قيمة. بمجرد حفظها ، يصبح متاحًا في أي وحدة تدعم تلك الخاصية.
تطبيق المتغير المحفوظ أمر سهل أيضًا. ما عليك سوى تحديد موقع أيقونة Manager المتغير عن طريق التحول على خيار إعدادات الوحدة النمطية ، والنقر فوقه لملء جميع المتغيرات المحفوظة ، واختيار الخيار الذي تريد تطبيقه.
أفضل جزء في متغيرات التصميم هو أنه ليس فقط قيم التصميم ، ولكن يمكنك أيضًا حفظ قيم المحتوى القابلة للتكرار مثل الصور والروابط والسلاسل النصية. وبهذه الطريقة ، يمكنك إدارة المحتوى المتكرر بشكل فعال عن طريق إعادة استخدام عناصر المحتوى الشائعة عبر موقع الويب الخاص بك دون عمل يدوي.
تعلم كل شيء عن متغيرات تصميم Divi 5
تحديد متغيرات CSS في Divi 5
هل هذا يعني أن متغيرات التصميم تحل محل متغيرات CSS؟ ليس بالضبط.
تعد متغيرات التصميم رائعة لتخزين القيم التي تستخدمها في كثير من الأحيان ، مثل ألوان العلامة التجارية ، ولكن ليس كل نمط يجب أن يكون عالميًا. لن ترغب دائمًا في حفظ كل قرص بسيط كمتغير تصميم ، خاصة عندما يكون فريدًا في صفحة واحدة.
لنفترض أنك تقوم بإنشاء صفحة مقصودة مع قسم بطل مخصص. يختلف الارتفاع عن أي شيء آخر على الموقع ، ومن غير المرجح أن تعيد استخدامه. إن توفير ذلك كمتغير للتصميم ليس هو أفضل استخدام لمكتبتك العالمية. في هذه الحالة ، يعد تحديد متغير CSS مباشرة في إعدادات الصفحة خيارًا أنظف.
وينطبق الشيء نفسه على تخطيطات معقدة أو لمرة واحدة. ربما تحتاج إلى لون مخصص مخصص أو قيمة تباعد خاصة بالتخطيط وذات صلة فقط في هذا السياق. بدلاً من ازدحام نظامك مع المتغيرات ، لن تعيد استخدامها أبدًا ، يمكنك تحديد متغيرات CSS مباشرة حيث تحتاج إليها.
لا نريدك أن تحل محل متغيرات CSS بمتغيرات التصميم. نريدك أن تستخدم أفضل ما في كليهما.
لهذا السبب يجعل Divi 5 تحديد متغيرات CSS سهلة. يمكنك بسهولة إعلان متغيرات CSS الخاصة بك داخل إعدادات الصفحة> متقدمة> CSS المخصصة ، تمامًا كما تفعل في CSS العادية.
لكننا نقوم بتبسيط طلبهم لك. بمجرد تحديدها ، يمكنك استخدام هذه المتغيرات عبر تلك الصفحة. انتقل إلى أي وحدة نمطية ، واختر CSS VAR من القائمة المنسدلة للوحدات المتقدمة ، وأدخل الاسم المتغير داخل وظيفة VAR ().
يمنحك هذا النهج المرونة عند الحاجة ، دون إجبارك على ارتكاب كل شيء لنظام متغير التصميم المرئي. إنه توازن بين الهيكل والحرية الإبداعية.
باستخدام متغيرات CSS في Divi 5
كيف يجعل Divi 5 سير عمل متغير CSS بلا مجهود
الآن بعد أن عرفت متغيرات CSS وكيف يدعمها Divi 5 بصريًا ، وهذا ما يهم حقًا. هذا ليس فقط لأن Divi يمنحك طريقتان لاستخدام متغيرات CSS. إنه لأنه يجعلهم يتكاملون بسلاسة مع سير العمل الخاص بك.
يمكنك بسهولة استخدام متغيرات CSS مع ميزات قوية مثل متغيرات التصميم ، ومسبق مجموعة الخيارات ، والوحدات المتقدمة. لا تزال تحصل على كل المرونة وقابلية التوسع في CSS التقليدية ، ولكن دون كتابة سطر واحد من التعليمات البرمجية ما لم تختر ذلك.
دعنا نسير عبر كيف يجلب Divi 5 سير العمل هذا إلى الحياة.
1. قم بإنشاء إطار التصميم الخاص بك
تعد متغيرات التصميم قوية حقًا لأنه يمكنك إنشاء إطار التصميم بالكامل بصريًا ، لذلك لا يتطلب تصميم الصفحة بضع نقرات فقط. نوصي بالبدء بعناصر التصميم الأساسية الخاصة بك ، مثل أحجام الخطوط ووحدات التباعد وألوان العلامة التجارية ، لذلك لديك جميعها في مكان واحد.
بعد ذلك ، يمكنك أيضًا حفظ المحتوى المستخدم بشكل متكرر مثل سلاسل النص وعناوين URL والصور. على سبيل المثال ، يعزف الخلفية الشائعة التي تتكرر عبر أقسام مختلفة ، وروابط وسائل التواصل الاجتماعي ، والبريد الإلكتروني ، والعنوان ، إلخ.
بمجرد وضع إطارك في مكانه ، يصبح كل شيء أسهل. لا تحتاج إلى العودة إلى ورقة أنماط الجذر للعثور على متغير أو تذكر الأسماء الدقيقة. ينظمها Divi لك: الألوان في علامة التبويب Color ، وخطوط في علامة التبويب الخط ، وكل شيء يمكن الوصول إليه داخل المدير المتغير .
وعندما يحتاج موقعك إلى تحديث للتصميم ، فلن تضيع وحدة تحرير الوقت حسب الوحدة النمطية أو البحث عبر ورقة أنماط طويلة. ستقوم بتحديث القيمة المحفوظة في المدير المتغير مرة واحدة ، وتطبق التغييرات الخاصة بك على الفور عبر كل مثيل.
نفس التحكم على مستوى CSS ، ولكن دون الحاجة إلى حفظ أو كتابة أو تصحيح أي شيء.
2. استخدم خيار مجموعة الإعدادات المسبقة للتصميم المرن
يمنحك خيار مجموعة الإعدادات المسبقة تحكمًا أكثر تفصيلاً في نظام التصميم الخاص بك. بدلاً من تطبيق مجموعة واحدة من الأنماط عبر موقعك ، يمكنك إنشاء مجموعات متعددة من خيارات التصميم لحالات الاستخدام المختلفة ، وكلها مصممة من نفس متغيرات التصميم الأساسية.
هنا ، أنت طبقات أنماط. يمكنك تحديد القيم الأساسية الخاصة بك مرة واحدة في المدير المتغير ، ثم قم بإنشاء إعدادات مسبقة مختلفة تسحبها من تلك القيم ولكنها تطبقها بطرق مختلفة قليلاً. إذا قمت بتحديث قيمة متغيرة محفوظة ، فإن التغيير ينعكس على الفور عبر جميع الإعدادات المسبقة والوحدات النمطية التي يتم تطبيقها.
يساعدك نظام التصميم المستند إلى الإعداد المسبق هذا على إنشاء مجموعات تصميم غير محدودة. على سبيل المثال ، قد يكون لديك نمط عنوان واحد لبطل الصفحة الرئيسية وأخرى لعناوين المدونة ، وكلاهما باستخدام نفس متغير حجم الخط ولكن مع تباعد أو أوزان أو تحويلات مختلفة.
البنية تبقى نظيفة. لا يزال التصميم متسقًا. وعند الحاجة ، يمكنك تجاوز أي إعداد مسبق على مستوى الوحدة النمطية. لذلك تحصل على سيطرة على مستوى النظام دون فقدان الحرية الإبداعية.
3. إعلان متغيرات CSS المخصصة لمزيد من التحكم
كما تعلمون ، لا يقفلك Divi من السيطرة المتقدمة. إذا كنت ترغب في تحديد متغيرات CSS الخاصة بك ، فيمكنك القيام بذلك مطلقًا عبر إعدادات الصفحة> Advanced> CSS المخصصة. لكن هذا ليس الجزء الممتع.
ما هو ممتع هو أنه يتيح لك استخدام وظائف CSS قوية مثل Clamp () و CAL () (بفضل الوحدات المتقدمة) لبناء تخطيطات سائلة وسريعة الاستجابة بصريًا. يمكنك أيضًا استخدام متغيرات CSS المحفوظة كقيم لمتغيرات التصميم الخاصة بك.
هذا يساعدك على بناء نظام تصميم أكثر ترابطًا. لم يعد منطق CSS والتصميم المرئي موجودًا في صوامع منفصلة. يمكنك تحديد قيمة مرة واحدة في CSS والسحب منها بصريًا حيثما كان الحاجة. إنه يحافظ على سائل سير العمل الخاص بك وقابل للتطوير وسهل الصيانة.
قد تجد كل هذا ساحقًا ، ولكن بمجرد أن تفهم كيف يعمل معًا ، لا يوجد عودة. إنه يغير الطريقة التي تصمم بها وتفكر وبناء. ما يبدأ كنظام للمتغيرات يصبح بسرعة لغة التصميم الخاصة بك. ونعم ، هذه الأدوات قوية ، ولكن من المفترض أن تتشكل حول عمليتك. خذ وقتك ، واستكشف ما يناسب أسلوبك ، وقم ببناء سير عمل يناسبك.
يقدم Divi مقاربة مدمجة لمتغيرات CSS
تصميم مع متغيرات CSS المستخدمة لتعني الاختيار بين المرونة والتعقيد. يمسح Divi 5 ويجلب القوة الكاملة للمتغيرات والتحكم البصري والتحديثات على مستوى الموقع والمنطق الطبقات في سير عمل بديهي وقابل للتطوير.
ليس عليك الاختيار بين CSS المخصص وتصميم عدم الرمز. يمكنك مزج نظامك وتطويره وتطور نظامك مع نمو مشاريعك. وبمجرد أن ترى مدى سلاسة وقوة هذا ، من الصعب تخيل بناء أي طريقة أخرى. ولكن لذلك ، تحتاج إلى السيطرة على يديك.
جرب Divi 5 لنفسك وقم ببناء نظام تصميم يعمل معك ، وليس ضدك.