המדריך ל- Zen Coding

אז מה זה Zen Coding?

Zen Coding (או Emmet) זהו סוג של כתיבה מקוצרת בעיקר עבור Html ו- Xml שעוזרת לנו לכתוב קוד יותר מהר באמצעות שימוש במספר מילות ותווי מפתח שיהפכו את עצמם לקוד תקין.

כך על ידי כתיבה של מספר תווים בודדים אוכל ליצור במהירות דף Html שלם או להוסיף מספר אלמטים לדף קיים.

למשל, במקום לרשום:

<div id="foo" class="bar" ></div>

אוכל לרשום זאת באמצעות Zen Coding כך:

#foo.bar

 

אז איך כותבים את זה?

# - id ל node שנרצה (div הוא ברירת המחדל, הערה זאת רלוונטית גם עבור כל ההגדרות הבאות)

. - עבור class ל- node

< - הגדרת ילד עבור ה node

+ - הגדרת מספר בנים שונים תתבצע באמצעות פרמטר זה

* - הכפלה של ה node שנרצה

$ - מספר עולה. למשל אם נגדיר 4 אלמנטים עם $ נקבל מספרים עולים מ-1 עד 4. אם נגדיר $$ אז נקבל 01 עד 04.

[] - מגדיר attribute כפי שנרצה. למשל [title="text"] יוסיף את ה- attribute בשם title עם הערך text.

{} - ערך עבור ה node. למשל a{click here} יהפוך ל <a href="">click here</a>

lorem - יוסיף טקסט של lorem ipsum. עם מוסיפים מספר בסוף כך lorem20 נקבל 20 מילים של lorem ipsum. ברירת המחדל היא 10.

 

ניתן לשלב בין כל הפרמטרים הנ"ל

 

דוגמאות:

1. div עם id בשם foo - יוגדר באמצעות #

#foo

ונקבל

<div id="foo"><div>

אפשר גם להוסיף class באמצעות . (נקודה)

.myClass

תוצאה:

<div class="myClass"></div>

 

2. אפשר ליצור ul עם 5 li בתוכו:

ul>li*5

והתוצאה:

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

 

3. אפשר לשלב בין האופציות השונות, למשל, ליצור div עם 4 span בתוכו שלכל אחד מהם class בשם mySpan ומספרו הסידורי ברשימה ויהיה בתוכו 5 מילים מתוך lorem ipsum:

div>span.mySpan$*4>lorem5

והתוצאה היא:

<div>
    <span class="mySpan1">Lorem ipsum dolor sit amet.</span>
    <span class="mySpan2">Consectetur adipiscing elit fusce vel.</span>
    <span class="mySpan3">Sapien elit in malesuada semper.</span>
    <span class="mySpan4">Mi, id sollicitudin urna fermentum.</span>
</div>

 

אז איך אני יכול להתחיל להשתמש ב Zen Coding?

קיימים תוספים עבור עורכי הטקסט המתקדמים. מצורפים קישורים לתוספים עבור כל אחד מהתוכנות:

Visual Studio - ניתן להוסיף כחלק מה- Web Essentials.

Notepad++, Sublime Text , TextMate ועוד: ניתן להוריד מכאן

 

 

הוסף תגובה