Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Avocode
Webdesign

كيفية انشاء متغيرات ال"CSS" بواسطة "Avocode 3"

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by Amr Salah (you can also view the original English article)

في هذا البرنامج التعليمي سأوضح لك كيفية إنشاء متغيرات CSS باستخدام Avocode 3. سنستخدم تصميمًا تم استيراده من أحد تطبيقات التصميم مثل "Adobe XD" أو "Sketch".

يمكن لـ Avocode 3 في الواقع إنشاء متغيرات لمعالجات سابقة ( SASS و LESS و Stylus وغيرها) ولكن من أجل البساطة سوف نعمل مع متغيرات CSS الأصلية. سننشئ متغيرات لألوان التصميم ، والطباعة ، وبعض خيارات التنسيق. هذه هي جوانب منتجنا النهائي الذي قد نرغب في تغييره في بعض الأحيان (لن يكون من المفيد جدًا إنشاء متغيرات لكل شيء).

متغيرات Avocode 3 و CSS

يرافق هذا الفيديو دورتي التدريبية الجديدة ، ويتم أخذ التصميم الذي تراه في الفيديو من ذلك. ألقِ نظرة إذا كنت مهتمًا بمعرفة المزيد عن Avocode:

  • Adobe XD to Code With Avocode 3

الابتداء بالالوان

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

swatches
حوامل في Avocode
swatch name
اسم الحامل

مع تحديد العينة ، سترى قيمة اللون الفعلية المعروضة في الخصائص. في هذه الحالة ، يكون الرقم # 8b959d ، لذا حددها وانسخها.

إنشاء متغير

أسفل القيمة التي حددتها ، سترى نافذة المتغيرات. انقر فوق الزر + لإضافة واحدة جديدة.

في مربع الحوار الذي ينبثق ، قم بلصق قيمة اللون في حقل "النص المستبدل". ثم ، في حقل اسم المتغير ، أدخل اسم المتغير الذي ترغب في استخدامه. الآن ، سيتم استبدال أي مثيلات لقيمة اللون الموجودة في التصميم بالمتغير.

ستلاحظ أننا استخدمنا _color في نهاية سلسلة المتغيرات الخاصة بنا. سيكون هذا مفيدًا عندما ننتقل إلى الكود حيث سنكون قادرين على تمييز نوع واحد من المتغيرات من نوع آخر.

إليك كيفية ظهور المتغيرات بمجرد تعيينها:

متغيرات أخرى

نفس العملية تنطبق على المتغيرات الأخرى. حيث استخدمنا القيم السداسية للألوان في المثال الأول ، يمكنك إضافة أسماء عائلة الخط ، والقيم الرقمية ، وكل ما تريد. يمكن استبدالها كلها بمتغيرات CSS بالطريقة نفسها.

يمكنك بالتالي استخدام المتغيرات لمعظم جوانب CSS الخاصة بك. الأحجام ، استعلامات الوسائط ، وحدات القياس ، الأمر متروك لك! تحقق من الفيديو لمزيد من الشرح.

كود التصدير

الآن لجزء مهم جدا من كل هذا: تصدير شفرة CSS التي ستأخذ المتغيرات الخاصة بنا في المتصفح. بمجرد أن تصبح جميع المتغيرات الخاصة بك جاهزة ، في لوحة Variables ، انقر فوق الزر Import / Export.

export code from avocode

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

قد تجد أنه من المفيد ترتيب المتغيرات داخل ورقة الأنماط هذه بحيث يكون من الأسهل إدارتها (الألوان مع الألوان والمتغيرات typgraphic مع بعضها البعض وهكذا).

الاستنتاج

هذه هي الطريقة التي يمكنك من خلالها إنشاء متغيرات CSS من تصميم باستخدام Avocode! إنها عملية أسرع بكثير من ذلك عن ترميز متغيرات CSS يدويًا ، لذا فهي ميزة مفيدة جدًا والتي أنا متأكد من أنك ستستمتع باستخدامها.

تعلم المزيد

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.