تعد Emmet ، التي كانت تُعرف سابقًا باسم Zen Coding ، واحدة من أفضل الأدوات التي يجب أن تضطر إلى زيادة إنتاجيتك أثناء ترميز HTML أو CSS. إنه يعمل تمامًا مثل اكتمال الشفرة ، ولكنه أكثر قوة ومدهشًا. وهي قادرة على أتمتة HTML / CSS من نموذج بسيط إلى النموذج المعقد.
يقدم Emmet دعمًا جيدًا لمحرر النصوص أو IDE (بيئة التطوير المتكاملة) مثل Dreamweaver و Eclipse و Sublime Text و TextMate و Expresso و Coda و Brackets و Notepad ++ و PHPStorm وغيرها الكثير. كما أنها تدعم أداة التحرير عبر الإنترنت مثل JSFiddle و JSBin و CodePen و IceCoder و Codio .
طريقة العمل Emmet هي عن طريق كتابة مفتاح لوحة المفاتيح الخاصة بك علامة التبويب عند كتابة بناء الجملة. فيما يلي رموز Emmet الأكثر شيوعًا التي يمكنك استخدامها. لرؤيتها في العمل ، يرجى مواصلة القراءة.
Emmet - HTML أفضل الخدع
سوف تكون عن دهشتها عند كتابة HTML مع Emmet مثلما فعلت. كما ذكرنا سابقًا ، تستطيع Emmet اختصار HTML بسيط إلى معقد جدًا. وهي مكتوبة فقط على سطر واحد من التعليمات البرمجية. بشكل افتراضي ، إذا قمت باختصار اسم علامة غير معروفة ، فسيقوم Emmet بكتابة العلامة التي تكتبها تلقائيًا. انظر الرسوم المتحركة أدناه لفهمها بسهولة.
1. التعشيش
لإضافة بعض العناصر ، يلزمك فقط إضافة علامة أكبر > بعد كل علامة تريد استخدامها. على سبيل المثال ، عندما أريد الحصول على header باستخدام nav و div و ul و li ، أحتاج فقط إلى كتابة header>nav>div>ul>li ومفتاح علامة تبويب النقرة.
2. الأخوة
إذا كنت لا ترغب في تضمين عناصرك ، فيمكنك ببساطة استخدام علامة زائد + متبوعة بالعلامات التي تريد إضافتها. على سبيل المثال ، سيعطي header+section+article+footer مكانًا مختلفًا header section article footer .
3. تسلق
عندما تكون داخل عنصر فرعي وترغب في الحصول على عنصر آخر خارج ذلك الطفل ، يمكنك بسهولة تسلق عنصر واحد باستخدام علامة ^ . إذا قمت بكتابته مرتين ، فستتسلق عنصرًا مزدوجًا وما إلى ذلك. على سبيل المثال ، إذا header>div>h1>nav لديك عنصر التنقل داخل h1. لإخراجها ، ما عليك سوى استبدال علامة > الأخيرة بـ ^ .
4. إضافة فئة
كما أن Emmet قادر على تضمين اسم الفئة المفضل لديك داخل العلامة. العلامة التي ستستخدمها هي نفسها مثل محدد الصف في CSS وهي نقطة . إشارة. على سبيل المثال ، إذا كنت أرغب في الحصول على div مع فئة .container ، h1 مع .title و nav مع .fixed ، فيجب فقط كتابة div.container>header>h1.title+nav.fixed .
إذا كنت ترغب في الحصول على أكثر من فصل دراسي واحد ، فاكتب فئة إضافية بعد الدرجة الأولى مع النقطة . إشارة. مثال: سوف ينتج div.container.center .
5. اضافة الهوية
بالإضافة إلى الصف ، يمكنك أيضًا إضافة معرّف داخل علامتك باستخدام علامة # . استخدام هو نفسه مثل إضافة فئة ولكنك قد لا تكتب معرف مزدوج داخل. إذا حاولت القيام بذلك ، سيقوم Emmet بقراءة معرف المستخدم الأخير الذي تكتبه فقط.
6. إضافة النص
إن Emmet ليس بهذه البساطة مثل اختصار بعض العلامات ، بل يمكنك إضافة سطر من النص داخلها. لإضافة بعض النصوص ، عليك فقط أن تلتف للنص بعلامة قوس مجعد {} . لست بحاجة إلى إضافة علامة > أكبر ، حيث ستتم إضافة النص تلقائيًا داخل العلامة.
7. إضافة السمة
إذا كنت تريد إضافة سمة أخرى بصرف النظر عن الفئة والمعرف ، فضع السمة التي تريد إضافتها داخل علامة [] . على سبيل المثال ، أريد الحصول على صورة تحمل مصدر logo.png مع شعار alt ، لذلك اكتب img[src="logo.png"] .
8. التجميع
عندما تريد أن يكون لديك عنصر متعدد داخل داخله ، فإن تجميعهم مع علامة () سيساعدك على تحقيق ذلك بسهولة. على سبيل المثال ، أريد أن يكون لديك حاوية تحتوي على رأس مع h1 والتنقل داخلها وقسم آخر خارج الرأس ، سأكتب ببساطة: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. الضرب
هذه الميزة قد تصبح واحدة من المفضلة لديك من Emmet. كما هو الحال مع الضرب ، يمكننا مضاعفة أي عنصر بقدر ما نريد. لاستخدامها ، قم ببساطة بإضافة علامة * نجمة بعد العنصر الذي تريد مضاعفته وإضافة رقم العنصر. على سبيل المثال ، أريد أن أكتب خمسة عناصر لي داخل ul ، ثم الصيغة الصحيحة هي ul>li*5 .
10. الترقيم التلقائي
سيساعدك الترقيم التلقائي على كتابة اسم مختلف بسهولة مع زيادة العدد. بناء الجملة الصحيح لهذه الميزة هو علامة $ الدولار. من الأفضل استخدام الترقيم التلقائي مع الضرب. على سبيل المثال ، أريد إضافة عنصر li السابق مع فئة من item1 إلى item1 . لذا ، يجب إضافة اسم صنف إضافي بعلامة الدولار: ul>li.item$*5 .
11. لوريم
إذا كنت تستخدم في كتابة بعض النص الوهمي عن طريق فتح مولد lipsum مثل lipsum.com ، فلن تحتاج إلى استخدام Emmet بعد الآن. كما يدعم Emmet مولد النص الوهمي مع تركيب lipsum أو lipsum . يمكنك أيضًا تحديد المدة التي سيصبح فيها نصك. على سبيل المثال ، أريد أن أحصل على بعض النصوص ذات 10 كلمات ، ثم اكتب lorem10 .
12. وثيقة السيارات
عندما تبدأ مشروعًا جديدًا ، بدلاً من كتابة بنية html يدويًا أو نسخ اللصق من موارد أخرى ، يمكن لـ Emmet فعل ذلك من أجلك بشكل أفضل. كل ما عليك القيام به هو كتابة تعجب ! التوقيع ، انقر فوق علامة التبويب ويحدث السحر. سيؤدي ذلك إلى إنشاء بنية مستند HTML5 لك ، إذا كنت تريد استخدام HTML4 بدلاً من ذلك ، فاكتب فقط html:4t .
13. رابط
إذا كان لديك ملف favicon أو rss أو ملف CSS خارجي تريد إضافته إلى المستند ، فيمكنك استخدام حيل الارتباط لكتابتها بشكل أسرع. لتضمين favicon ، اكتب link:favicon ثم سيؤدي إلى إنشاء رابط favicon مع اسم ملف favicon.ico الافتراضي بالداخل. وبالنسبة إلى css ، link:css سينشئ لك رابط CSS باسم النمط style.css الافتراضي بالداخل. وسيكون RSS rss.xml كاسم افتراضي.
يمكنك الجمع بينها باستخدام علامة + لإنشاء موارد أسرع.
14. مرساة
بشكل افتراضي ، عند كتابة علامة ثم النقر فوق علامة التبويب ، ستحصل على علامة كاملة مع سمة href بالداخل. ولكن يمكنك إضافة قيمة // حالة دمجه مع رابط على سبيل المثال a:link . وإذا كنت ترغب في الحصول على رابط بريد بدلاً من ذلك ، فاستخدم a:mail .
15. ذكي تخطي
ستكون حيل HTML الأخيرة التي سأقدمها لك ميزة التخطي الذكي. في الأساس ، ليس لديك اسم العلامة عندما تريد أن يكون لديك صنف أو معرف بداخله. هذا ينطبق فقط على بعض الشروط المحددة.
أولاً ، إذا كنت ترغب في الحصول على div بهوية أو فئة داخل ، فأنت لست بحاجة إلى كتابة اسم العلامة ، فقط اكتب رمز الهوية أو الفصل مباشرة مع اسمها.
ثانيًا ، عندما تكون داخل علامة ul ، فإنك تتخطى كتابة علامة li إذا كانت تحتوي على فئة أو معرف.
ويتم تطبيق الأخير داخل علامة table . يمكنك تخطي كتابة tr و td tag إذا كان لديهم صف أو معرف وسيقوم Emmet تلقائيًا بإضافتها لك.
Emmet - أفضل CSS الخدع
بعد أن تعلمت بعض حيل HTML ، حان الوقت الآن لـ CSS. بعض الرموز الشائعة الموضحة في الصورة العليا لن تعمل مع CSS. هم أكبر > وتسلق ^ الرموز. إذا كنت تستخدمها ، فإنها ستنتج فقط مثل رمز + زائد. لذا دعنا نذهب.
1. العرض والارتفاع
تعريف width height مع Emmet سهل للغاية. عليك فقط كتابة الكلمة الأولى منها متبوعة بالحجم الذي تريد إضافته. بشكل افتراضي ، إذا لم تقم بتحديد الوحدات ، سيقوم Emmet بتوليدها بوحدة px . رمز الوحدة المتاحة هو النسبة % و em .
2. النص
هناك بعض رموز خاصية النص النصي سهلة الاستخدام وسيتم إنشاؤها باستخدام القيمة الافتراضية. سوف ta تولد text-align مع القيمة left ، وسوف يكون text-decoration td text-decoration مع none قيمة و tt سوف تصبح text-transform مع قيمة uppercase .
3. خلفية
لإضافة خلفية ، ما bg سوى استخدام الاختصار bg . يمكنك دمجها مع bgi للحصول background-image ، bgc background-color و bgr background-repeat . يمكنك أيضًا كتابة bg+ للحصول على قائمة كاملة بخصائص الخلفية.
4. خط الوجه
علامة الجمع لا تنطبق فقط على الخلفية. بالنسبة لـ @font-face ، يمكنك ببساطة كتابة @f+ للحصول على قائمة كاملة بخاصية @font-face . إذا @f بدون علامة زائد ، فستحصل على @font-face أساسي فقط.
5. متنوعة
الحيل الأخرى الرائعة هي أنه يمكنك اختصار الكتابة animation بنصوص animation . إذا قمت بإضافة علامة سالب ، فسوف تحصل على خاصية رسوم متحركة ذات قيمة كاملة. يوجد أيضًا نص @kf الذي سينتج قائمة كاملة بـ @keyframe .
استنتاج
Emmet هي أداة ضخمة لتوفير الوقت لتبسيط عملية التطوير الخاصة بك. إذا كنت تعرف Emmet ، لم يفت الأوان لتجربتها الآن. هذه الحيل ليست سوى بعض من ميزات Emmet. هناك طن من رمز وصياغة أخرى في Emmet ، وخاصة بالنسبة CSS. فقط توجه إلى مستندات Emmet أو ورقة الغش لمزيد من القراءة.
